@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E30-8s51op.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/barlowcondensed/v12/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrc3Pmu4kD.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/barlowcondensed/v12/HTxwL3I-JCGChYJ8VI-L6OO_au7B47rxz3bWvA.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: italic;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/barlowsemicondensed/v15/wlpkgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXfbJnAVsno5w.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: italic;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/barlowsemicondensed/v15/wlpkgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXfbIDAlsno5w.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: italic;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/barlowsemicondensed/v15/wlpkgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXfbJ3BFsno5w.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: italic;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/barlowsemicondensed/v15/wlpkgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXfbITBVsno5w.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/barlowsemicondensed/v15/wlpigxjLBV1hqnzfr-F8sEYMB0Yybp0mudRft6u_B2sg.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/barlowsemicondensed/v15/wlpigxjLBV1hqnzfr-F8sEYMB0Yybp0mudRf06i_B2sg.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/barlowsemicondensed/v15/wlpigxjLBV1hqnzfr-F8sEYMB0Yybp0mudRfp66_B2sg.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/barlowsemicondensed/v15/wlpigxjLBV1hqnzfr-F8sEYMB0Yybp0mudRfw6-_B2sg.ttf) format('truetype');
}


/* Basic CSS Resets */
* {
    box-sizing: border-box;
}
p {
    margin: 0 0 1em;
}
.navlist {
    display: block;

    margin: 0 auto;
    padding: 0;

    list-style-type: none;
}
.navlist a {
    text-decoration: none;
}

/* Hyperlink Colors */
a {
  text-decoration: none;
}
a:link {
  color: #2ea169;
  border-bottom: 1px solid #2ea169;
}
a:visited {
  color: #36449f;
  border-bottom: 1px dashed #36449f;
}
a:hover,
a:focus {
  color: #36ba7a;
  border-bottom: 1px dotted #36ba7a;
}
a:active {
  color: #ef7205;
  border-bottom: 1px dashed #ef7205;
}

/* Typography */
body {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 200;
}
strong {
    font-weight: 600;
}
header .branding {
    font-family: 'Barlow', sans-serif;

    letter-spacing: -.05em;
    /* Text gradient permalink http://colorzilla.com/gradient-editor/#1c6140+24,2f9e6c+25,36479d+74,20295f+75 */

    background: linear-gradient(to right, #1c6140 27%,#2f9e6c 27%,#36479d 75%,#20295f 75%);
    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}
header .branding a {
    text-decoration: none;
}
header .branding span {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18%;
    font-weight: 300;
    font-style: italic;
    line-height: 1;

    letter-spacing: normal;

    color: #000;
    background: transparent;
    -webkit-background-clip: none;

    -webkit-text-fill-color: #000;
}

/* General Layout */
body {
    background-color: #fff;
    margin: 0;
}

/* Header Navigation Global Styles */
header nav a,
header nav a:link,
header nav a:visited,
header nav a:hover,
header nav a:active {
    font-weight: 600;
    line-height: 1;
    display: block;
    text-decoration: none;
    color: rgba(255,255,255,0.95);
    /*text-shadow: 0 0 4px rgba(0,0,0,1);*/
    z-index: 999;
    transition: all .15s linear;

}
header nav a:hover,
header nav a:active {
    color: rgba(255,255,255,1);
}
header nav li {
    position: relative;

    display: inline-block;
}


/* Footer */
footer {
    line-height: 1;
    padding: 0 0 0.5em;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;

    border-top: 4px solid rgba(167,224,241,1);
    background-color: rgba(190,232,245,1);

    text-align: center;
}
.interior footer {
  position: relative;
}
footer .navlist {
    font-size: calc(1em + .2vw);
    font-weight: 300;

    width: 90%;
    margin: 8px auto 16px;

    text-align: center;
}
footer .nav-compact li,
#nav-menu li,
footer .navlist li {
    display: inline-block;
}
footer .navlist a {
    padding: .3em .6em;
    border-width: 4px 0 0;
    border-style: solid;
    border-color: rgba(255,255,255,0);

    transition: all .15s linear;
}
footer .navlist a:link,
footer .navlist a:visited {
    color: rgba(43,88,112,1);
}
footer .navlist li:not(.current) a:hover,
footer .navlist li:not(.current) a:active {
    /*color: rgba(255,255,255,1);*/
}
footer .navlist li:not(.current) a:hover {
    border-color: rgba(47,97,122,0.6);
}
footer .navlist li:not(.current) a:active {
    border-color: rgba(58,127,94,1);
}
footer .navlist .current a {
    border-color: rgba(255,255,255,1);
    cursor: default;
}
footer .nav-compact,
#nav-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 110%;
  font-weight: 300;
}
footer .nav-compact li {
  margin: 5px 0;
  width: 45%;
}
footer .nav-compact a:link,
footer .nav-compact a:visited,
footer .nav-compact a:hover,
footer .nav-compact a:active,
footer .nav-compact span {
  display: inline-block;
  margin: 0;
  padding: 0.8em 1em;
  text-decoration: none;
  background-color: rgba(255,255,255,0.4);
  border-radius: 0.25em;
  border: none;
  width: 100%;
  color: rgba(43,88,112,1);
}
#nav-menu,
footer .nav-compact {
    display: none;
}
#nav-menu {
  padding: 0 0 6em;
  background-color: rgba(167,224,241,1);
  box-shadow: 0 6px 6px -4px rgba(127,184,201,0.8) inset;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
}
#nav-menu li {
  display: block;
}
#nav-menu a:link,
#nav-menu a:visited,
#nav-menu a:hover,
#nav-menu a:active {
  display: block;
  width: 100%;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding: 0.5em 1em;
  text-align: left;
  color: rgba(16,20,21,1);
}
#nav-menu .current,
#nav-menu a:hover {
  background-color: rgba(255,255,255,0.6);
}
#nav-menu a:active {
  background-color: rgba(255,255,255,0.8);
}
#nav-menu .control-close {
  font-size: 90%;
  background-color: rgba(255,255,255,0.3);
  padding: 0.5em 1em;
  margin: 0 0 0.5em;
  border-radius: 0 0 0.4em 0.4em;
  display: inline-block;
  cursor: pointer;
}
.copyright {
    font-size: .7em;
    font-weight: 200;

    margin: 0 auto 0.25em;

    color: #2b5870;
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-device-width : 520px) {
    footer {
        z-index: 900;
    }
    .copyright,
    footer .navlist {
        display: none;
    }
    footer .nav-compact {
        display: block;
    }
    .quick-action-open {
      display: block;
    }
}
/**
 * Home Page Styles
 **/

/* Typography */
header .branding {
    font-size: calc(1rem + 6vw);
    line-height: .9;
}

/* General Layout */
html,body {
    overflow-x: hidden;
    overflow-y: auto;
}
body {
    padding: 0 0 6em;

    background-image: url('../themes/nada/assets/images/nada-wave-animated.svg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}
#particles-js {
    position: absolute;
    z-index: -1;
    top: 150px;
    right: 0;
    left: 0;

    width: 100vw;
    height: 18vw;
}
header nav,
section,
footer nav {
    z-index: 1;
    margin: 0 auto;
}
header nav,
section {
    width: 56vw;
}

/* Graphic Navigation */
header {
    z-index: 999;
    /*background-color: #eee;*/

    margin: 0 auto;
    padding: 60px 0 20px;

    text-align: center;
    overflow-x: hidden;
}
header,
header nav,
header nav ul {
    background-image: none;
}
#header-content {
    width: 65vw;
    margin: 0 auto;
}
header .branding {
    width: 2.4em;
    margin: 0 auto;
    display: inline;
}
header .branding span {
    display: block;
}
header nav {
    /*background-color: #cce;*/
    margin: 0 auto;
}
header nav li {
    overflow: hidden;

    width: 10vw;
    height: 10vw;
    margin: 0 2vw 0;

    vertical-align: middle;

    border-radius: 50%;
}
header nav li:before {
    position: absolute;
    z-index: -1;

    display: block;

    width: 100%;
    height: 100%;

    content: ' ';

    background-image: url('../themes/nada/assets/images/nada-nav-ring.svg'), url('../themes/nada/assets/images/nada-nav-ring-active.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%, 10% 10%;
}
header nav li:hover:before {
    background-image: url('../themes/nada/assets/images/nada-nav-ring-active.svg');
}
header nav a,
header nav a:link,
header nav a:visited,
header nav a:hover,
header nav a:active {
    font-size: calc(0.1em + 1.25vw);

    width: 87.5%;
    height: 87.5%;
    margin: 6.25%;
    padding: 2.6em 0 0;

    border-radius: 50%;
    border: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
header nav a:hover {
    box-shadow: inset 0 0 10px 5px rgba(255,255,255,.4);
}
header nav #nav-1 {
    margin-top: -1vw;
}
header nav #nav-1:before {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}
header nav #nav-1 a {
    padding-top: 1.65em;

    background-color: #36449f;
    background-image: url('../themes/nada/assets/images/ine-nav-bkg.jpg');
}
header nav #nav-2 {
    margin-top: 2vw;
}
header nav #nav-2 a {
    background-color: #3a7f5e;
    background-image: url('../themes/nada/assets/images/services-nav-bkg.jpg');
    padding: 0;
    display: flex;
    align-items: center;
    flex-flow: column nowrap;
    justify-content: center;
}
header nav #nav-3 {
    margin-top: -2vw;
}
header nav #nav-3:before {
    -webkit-transform: rotate(80deg);
            transform: rotate(80deg);
}
header nav #nav-3 a {
    padding-top: 1.65em;

    background-color: #c16515;
    background-image: url('../themes/nada/assets/images/hpc-nav-bkg.jpg');
}
header nav #nav-4 {
    margin-top: 3vw;
}
header nav #nav-4:before {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
}
header nav #nav-4 a {
    background-color: #2f617a;
    background-image: url('../themes/nada/assets/images/applications-nav-bkg.jpg');
}
header:before,
header:after {
    position: fixed;

    display: block;

    width: 25vw;
    height: 25vw;

    content: '';

    border-radius: 50%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center center;
}
header::before {
    top: -5vh;
    left: -5vw;

    background-image: url('../themes/nada/assets/images/nada-nav-ring-lg.svg'), url('../themes/nada/assets/images/net-closeup.jpg');
    background-size: 100% 100%, 95.5% 95.5%;
}
header::after {
    top: 15vh;
    right: -5vw;

    background-image: url('../themes/nada/assets/images/nada-nav-ring-lg.svg'), url('../themes/nada/assets/images/brain-image-closeup.jpg');
    background-size: 100% 100%, 95.5% 95.5%;

    clip: rect(0, 20vw, 25vw, 0);
    clip-path: inset(0, 20vw, 25vw, 0);
}


/* Content */
.home #intro {
    padding: 0 2vw;
}
.home #intro h2 {
    font-size: calc(1em + 1.3vw);
    font-weight: 600;
    line-height: 1;

    margin: 0 0 .5em;

    color: #17303c;
}
.home #intro .overview {
    font-size: calc(1em + .35vw);

    box-sizing: initial;
    /*font-size: 1em;*/
    /*display: -webkit-box;*/
    /*display: flex;*/

    -webkit-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 2em;
            column-gap: 2em;
    -webkit-column-width: auto;
            column-width: auto;
}
.home #intro .overview > * {
    /*box-sizing: normal;*/
    /*display: inline-block;*/
    /*width: 100%;*/
    /*column-break-inside: avoid;*/
    box-sizing: initial;
}

footer #nav-0 {
    display: none;
}

/* Tablets and Small Screens (landscape) ----------- */
@media only screen 
and (max-device-width : 1024px) {
    header nav,
    section {
        width: 56vw;
    }
    footer nav {
        width: 100%;
    }    
    .home #intro h2 {
        font-size: calc(1em + 1.25vw);
    }
    .home #intro .overview {
        -webkit-column-count: 1;
                column-count: 1;
    }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (max-device-width : 520px) {
    body {
        background-size: auto 60vh;
    }
    #particles-js {
        height: 30vh;
        display: none;
    }
    #header-content {
        width: 90vw;
        margin: 0 auto;
    }    
    header {
        padding: 10px 0;
    }
    header nav {
        width: 100%;
    }
    header .navlist {
        position: relative;
    }
    section {
        width: 94%;
    }
    footer nav {
        width: 100%;
    }
    header::before,
    header::after {
        content: none;
        background: none;
        display: none;
    }
    header .branding {
        font-size: calc(1rem + 16vw);
        display: inline;
    }
    header nav li {
        width: 36vw;
        height: 36vw;
    }
    header nav #nav-1 {
        margin-top: 8vh;
        margin-left: -12vw;
    }
    header nav #nav-2 {
        margin-top: -3vh;
        /*margin-right: -5vw;*/
    }
    header nav #nav-3 {
        margin-top: 1vh;
        /*margin-right: -5vw;*/
    }
    header nav #nav-4 {
        margin-top: -9vh;
        margin-right: -12vw;
    }
    header nav a, header nav a:link, header nav a:visited, header nav a:hover, header nav a:active {
        font-size: calc(0.8em + 1.25vw);
    }
}