/*
♃♄♅♆♃♄♅♆♃♄♅♆♃♄♅♆♃♄♅♆♃♄♅♆♃♄♅♆♃♄♅♆
   | _   o _ ._   |\/| _ _|o _ 
 |_|(_)\/|(_|| |  |  |}_(_||(_|
♃♄♅♆♃♄♅♆♃♄♅♆♃♄♅♆♃♄♅♆♃♄♅♆♃♄♅♆♃♄♅♆
*/
@font-face {
    font-family: 'aileronsregular';
    src: url('/font/ailerons-regular-webfont.woff2') format('woff2'),
         url('/font/ailerons-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* GLOBAL */

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
	overflow: auto;
	height: 100%;
}

body {
	font-family: europa, sans-serif;
	font-weight: 300;
	font-style: normal;
	background-color: rgba(51, 51, 51, 1);
	color: #FFF;
	margin: 0;
	padding: 0;
	line-height: normal;
}
.antispam { display:none;}
.vh100 {
	height: 100vh;
}
.vh75 {
	height: 75vh;
}

.vh50 {
	height: 50vh;
}
.vh25 {
	height: 25vh;
}
.pad-top {
  padding-top: 3%;
}
.pad-bot {
  padding-bottom: 3%;
}
.add-pad {
  padding: 3% 0;
}
.txt-up {
    text-transform: uppercase;
}
section {
	position: relative;
	display: block;
}
.container {
  position: relative;
  display: block;
  width: 85%;
  margin: 0 auto;

}
    .hidden-mobile {
        display: none;
    }
    .hidden-desktop {
      display: block;
  }
hr {
    background: rgb(40,40,40);
    background: linear-gradient(90deg, rgba(40,40,40,1) 0%, rgba(85,85,85,1) 50%, rgba(40,40,40,1) 100%);
    height: 1px;
    border: 0;
}
/* HERO */

section.hero {
	font-family: 'aileronsregular', sans-serif;
	color: #FFF;
	margin: 0;
	padding: 0;
	line-height: normal;
}
section.hero h1 {
	font-size: 2rem;
}
#hero-vid {
	position: fixed;
	left: 0;
	top: 0;
	min-width: 100%;
	min-height: 100vh;
}

.hero-grid {
	position: absolute;
	background: url(/img/grid.svg), rgba(0, 0, 0, 0.3);
	background-repeat: repeat, repeat;
	background-position: top left, center;
	-webkit-background-size: auto, auto;
	-moz-background-size: auto, auto;
	-o-background-size: auto, auto;
	background-size: 5px, auto;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	z-index: 0;
	-webkit-transition: height 500ms, -webkit-transform 500ms;
	-moz-transition: height 500ms, transform 500ms;
	-ms-transition: height 500ms, transform 500ms;
	-o-transition: height 500ms, transform 500ms;
	transition: height 500ms, transform 500ms;
}
#jupiter {
	position: absolute;
	background: rgba(0, 0, 0, 1);
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: auto, auto;
	-moz-background-size: auto, auto;
	-o-background-size: auto, auto;
	background-size: auto, auto;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	z-index: 0;
	-webkit-transition: height 500ms, -webkit-transform 500ms;
	-moz-transition: height 500ms, transform 500ms;
	-ms-transition: height 500ms, transform 500ms;
	-o-transition: height 500ms, transform 500ms;
	transition: height 500ms, transform 500ms;
}

.hero-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;
	padding: 0;
}


.hero-logo img {
	width: 75%;
}

/*.hero-logo a {
    display: block;
    color: white;
    font-size: 1.5em;
    margin-top: 20px;
}*/
span.codedirection {
    unicode-bidi: bidi-override;
    direction: rtl;
}


/* SECTION INFO */
div.bg-grad {
  position: relative;
  display: block;
  background: rgb(40,40,40);
  background: linear-gradient(175deg, rgba(0,0,0,1) 0%, rgba(40,40,40,1) 50%);
}

div.info {
	position: relative;
}
div.info p {
    text-align: left;
    font-size: 1.5rem;
    background-color: rgba(40,40,40,1);
    padding: 3%;
    width: 90%;
    margin: 0 auto;
}
div.info > div {
    padding: 3% 0;

}



.nhmi-wrapper {
    position: relative;
    z-index: 300;
}
.new-hp-main-info-title {
    color: #fff;
    font-size: 52px;
    text-transform: uppercase;
    padding: 24px 0;
}
.new-hp-main-info {
    padding: 64px 3% 0;
    background-color: #282828;
    width: 90%;
    max-width: 1380px;
    margin: 0 auto;
}
.cf:after, .cf:before {
    content: "";
    display: table;
}
.new-hp-main-info .nhmi-entry {
    padding: 0 24px;
    text-align: center;
    width: 100%;
    margin: 0 0 36px;
    float: none;
}
.new-hp-main-info .nhmi-entry figure {
    min-height: 68px;
}
.new-hp-main-info .nhmi-entry img {
    max-width: 68px;
    margin: 24px 0 0 0;
}
.new-hp-main-info h3 {
    color: #32FFFF;
    text-align: center;
    font-size: 20px;
    position: relative;
    margin: 0 0 10px;
    padding: 0 0 10px;
    text-transform: uppercase;
}
.new-hp-main-info h3:after {
    display: block;
    content: "";
    height: 1px;
    width: 48px;
    background-color: #bec5d0;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin: 0 0 0 -24px;
}
.new-hp-main-info .nhmi-entry p {
    color: #cccccc;
    font-size: 18px;
    width: auto;
    margin: 0 auto 24px;
}
.new-hp-main-info .nhmi-entry a {
    display: inline-block;
    font-size: 16px;
    color: #46c1ec;
    border: 2px solid #46c1ec;
    padding: 12px 24px;
}

/* CONTACT CTA */
section#contact-cta {
    text-align: center;
    background-color: #282828;
}
section#contact-cta h2 {
    font-size: 1.3em;
}
.btn {
    font-family: europa, sans-serif;
    display: inline-block;
    font-weight: 300;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .5rem 1rem;
    font-size: 1rem;
    border-radius: .25rem;

}
.btn-dk {
    text-transform: uppercase;
    color: #32ffff;
    background-color: transparent;
    border: 1px solid #32ffff;
    border-radius: 0;
    font-weight: 300;
    padding: .6rem 1rem;
    margin: 10px;
    width: 245px;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
a.btn-dk:focus, a.btn-dk:hover {
    color: inherit;
    background: rgba(0, 0, 0, 0.1);
    text-decoration: none;
}
a.btn {
    text-decoration: none;
}

.btn-wt {
    text-transform: uppercase;
    color: #FFFFFF;
    background-color: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 0;
    font-weight: 300;
    padding: .6rem 1rem;
    margin: 10px;
    width: 245px;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
a.btn-wt:focus, a.btn-wt:hover {
    color: inherit;
    background: rgba(0, 0, 0, 0.5);
    text-decoration: none;
}


/* CLIENTS */
section#clients {
  background: rgb(40,40,40);
  background: linear-gradient(90deg, rgba(40,40,40,1) 15%, rgba(47,47,47,1) 50%, rgba(40,40,40,1) 85%);
}
section#clients ul {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    text-align: center;
}
section#clients a {
    display: inline-block;
    padding: 25px;
    filter: grayscale(0);
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
section#clients a:hover,
section#clients a:focus {
    filter: grayscale(100%);
}
section#clients li {
    display: block;
    list-style-type:none;
}
section#clients ul > li > a > img {
    width: 100%;
    max-width: 300px;
}
div.title {
    text-align: center;
}
div.title h1{
    font-family: 'aileronsregular', sans-serif;
    text-align: center;
    font-size: 2rem;
}
section#clients div.line {
    height: 1px;
    width: 100px;
    background-color: aliceblue;
    display: inline-block;
    vertical-align: super;
    margin: 0 25px;

}
/* FOOTER */
footer {
    position: relative;
    background-color: #000;
    text-align: center;
    padding: 25px 0;
    font-size: 0.9em;
}
/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/


/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/


/* 
Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/


/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) {}


/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */

@media (min-width: 768px) {
        section#clients a {
        display: inline-block;
        padding: 50px;
    }
    section#clients li {
        display: inline-block;
        list-style-type:none;
    }
}


/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
	div.info p {
    	font-size: 1.5rem;
    	width: 90%;
      max-width: 1380px;
	}
  .new-hp-main-info .nhmi-entry {
      text-align: center;
      float: left;
      width: 33.3333%;
      padding: 0 24px;
      margin: 0 0 84px;
      min-height: 322px;
  }
  .new-hp-main-info .nhmi-entry p {
      width: 255px;

  }
    .hidden-mobile {
        display: block;
    }
    .hidden-desktop {
        display: none;
    }
        .hero-logo img {
        width: 100%;
        max-width: 690px;
    }
    #hero-vid {
        position: fixed;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100vh;
    }
    section#contact-cta h2 {
        font-size: 1.5em;
    }
}

/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {

}

/* Extra extra large devices (large desktops, 1440px and up) */

@media (min-width: 1440px) {

}

/* Extra extra extra large devices (large desktops, 1920px and up) */

@media (min-width: 1920px) {

}
/*** Landscape (767px and below) Devices ***/

@media (max-width: 992px) and (orientation: landscape) {
	.hero-logo img {
		width: 50%;
	}
    .vh75 {
    height: 100vh;
    }
}


/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/


/* Set width to make card deck cards 100% width */

@media (max-width: 950px) {}