html , * {
padding: 0;
margin: 0;
}
body {
font-family: "Mohave", sans-serif;
font-optical-sizing: auto;
font-style: normal;
background: #000;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
transition: all 0.3s ease-out;
}
.navbarWrapper {
transition: all 0.3s ease-out;
}

.container {
max-width: 1600px;
margin: 0 auto;
padding: 0 30px;
}
.navbarWrapper {
position: fixed;
padding: 40px 0;
width: 100%;
float: left;
z-index: 999;
}
.navbarWrapper_LHS {
width: 48%;
margin-right: 4%;
float: left;
}
.navbarWrapper_RHS {
width: 48%;
float: left;
text-align: right;
}
.navbarWrapper_LHS a {
font-size: 23px;
text-transform: uppercase;
color: #fff;
font-weight: 500;
line-height: 120%;
}
.navbarWrapper_RHS a {
font-size: 23px;
text-transform: uppercase;
color: rgba(255,255,255,0.8);
font-weight: 500;
}
.navbarWrapper_RHS a:hover , .navbarWrapper_RHS a.buttonOn {
color: rgba(255,255,255,1);
border-bottom: 2px solid #fff;
}
.navbarWrapper_RHS li {
display: inline-block;
margin: 0 10px;
}
.navbarWrapper_RHS li:last-of-type {
display: inline-block;
margin-right: 0px;
}
.hamburger {
width: 25px;
height: auto;
position: relative;
top: 2px;
display: none;
}
.hamburger:hover {
cursor: pointer;
opacity: 0.8;
}
.navbarWrapper_RHS .navbar {
float: right;
}
.closer {
display: none;
}

/* hide mobile nav above 750px */
.navbar-nav {
display: block;
}
.closer {
display: none;
}


@media (max-width: 900px) {
.navbarWrapper_LHS {
width: 40%;
margin-right: 0%;
}
.navbarWrapper_RHS {
width: 60%;
}
}
@media (max-width: 850px) {
.navbarWrapper_RHS li {
margin: 0 7px;
}
}
/* hanburger */
@media (max-width: 750px) {
.navbarWrapper_RHS .navbar {
/*display: none;*/
}
.hamburger {
display: inline-block;
} 
.navbarWrapper_LHS {
width: 78%;
margin-right: 4%;
}
.navbarWrapper_RHS {
width: 18%;
}
}





/* mobile nav */
@media (max-width: 750px) {
.navbar-nav {
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.9);
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
text-align: center;
display: flex;
align-items: center;
flex-wrap: wrap;
align-content: center;
z-index: 999999999;
display: none;
}
.navbar-nav li {
display: block;
width: 100%;
margin: 10px 0;
padding: 0;
}
.closer {
z-index: 999999999999999;
position: fixed;
top:39px;
display: block;
right: 30px;
display: none;
}
.closer img {
width: 25px;
height: 25px;
}
.navbarWrapper_RHS li:last-of-type {
display: block;
}
}

/* animated classes for nav */
@media (max-width: 750px) {
.closer {
opacity: 0;
display: none;
transition: all 0.4s ease-out;
}
.closerIn , .navIn {
display: block;
opacity: 0;
transition: all 0.4s ease-out;

}
.fadeUp {
opacity: 1;
transition: all 0.4s ease-out;
}
.navbar-nav li {
position: relative;
bottom: -20px;
transition: all 0.4s ease-out;
opacity: 0;
}
.navbar-nav li.animInNavItems {
position: relative;
bottom: 0px;
transition: all 0.4s ease-out;
opacity: 1;
}
}




/* HERO */
header.masthead {
width: 100%;
height: 80vh; /* must be same as .middleIt height */
float: left;
position: relative;
overflow: hidden;
text-align: center;
}
.masthead .heroBack {
width: 100%;
height: 100vh;
background-image: url('../images/hero.jpg');
background-size: cover;
background-position: center center;
content;'';
position: absolute;
top: 0;
}
.middleIt {
display: flex;
align-items: center;
justify-content: center;
height: 80vh; /* must be same as header.masthead height */
position: relative;
z-index: 99;
}
.middleIt div {
width: 100%;
}
.MonadoLogo {
width: 300px;
height: auto;
margin-bottom: 30px;
}
.masthead h2 {
color: #1fc3ae;
font-size: 40px;
font-weight: 600;
line-height: 100%;
text-transform: uppercase;
text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8); 
}
.masthead h3 {
color: #b7b7b7;
font-size: 25px;
font-weight: 600;
line-height: 130%;
text-transform: uppercase;
margin-bottom: 30px;
text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8); 
}
.masthead a {
display: inline-block;
background: #fff;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 5px;
color: #782b90;
padding: 19px 16px 15px 20px;
font-weight: 600;
}
.masthead a:hover {
opacity: 0.8;
}
@media (max-width: 1250px) {
.MonadoLogo {
width: 270px;
}
}
@media (max-width: 1000px) {
.MonadoLogo {
width: 250px;
}
}
@media (max-width: 750px) {
.MonadoLogo {
width: 220px;
}
.masthead h2 {
font-size: 35px;
}
.masthead h3 {
font-size: 24px;
margin-bottom: 25px;
}
.masthead a {
font-size: 19px;
letter-spacing: 4px;
padding: 18px 15px 14px 19px;
}
}
@media (max-width: 500px) {
.MonadoLogo {
width: 200px;
}
.masthead h2 {
font-size: 32px;
}
.masthead h3 {
font-size: 22px;
margin-bottom: 20px;
}
.masthead a {
font-size: 18px;
letter-spacing: 4px;
padding: 17px 14px 13px 18px;
}
}





/* ABOUT section */
.about-section {
float: left;
width: 100%;
z-index: 999;
padding: 80px 0;
background: url('../images/block1BGgrid.png') center center no-repeat,  linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(39,39,39,1) 100%);
background-size: cover;
overflow: hidden;
}
.aboutLHS {
padding-left: 10%;
width: 30%;
margin-right: 4%;
float: left;
}
.aboutRHS {
width: 46%;
float: left;
padding-right: 10%;
}
.about-section h2 {
font-size: 48px;
text-transform: uppercase;
color: #fff;
font-weight: 500;
line-height: 110%;
margin-bottom: 10px;
}
.about-section p {
color: #cccccc;
font-size: 20px;
line-height: 160%;
}
.about-section img {
width: 100%;
height: auto;
}
.about-section .middleIt {
height: auto;
}
.XRheadset {
position: relative;
opacity:0;
transform: translateX(70%);
/* transform: translateY(-50%) scale(0);*/
-webkit-transition:all 0.1s ease-in-out;
transition:all 0.1s ease-in-out;
}
.XRtext {
position: relative;
opacity:0;
transform: translateX(-70%);
-webkit-transition:all 0.1s ease-in-out;
transition:all 0.1s ease-in-out;
}
.slideIn {
opacity:1;
transform: translateX(0px);
/*transform: translateY(0%) scale(1);*/
-webkit-transition:all 1s ease-in-out;
transition:all 0.75s ease-in-out;
}
@media (max-width: 1300px) {
.about-section h2 {
font-size: 44px;
margin-bottom: 10px;
}
.about-section p {
font-size: 19px;
}
}
@media (max-width: 1050px) {
.aboutLHS {
padding-left: 5%;
width: 40%;
margin-right: 4%;
}
.aboutRHS {
width: 46%;
padding-right: 5%;
}
}
@media (max-width: 900px) {
.about-section h2 {
font-size: 40px;
margin-bottom: 8px;
}
.about-section p {
font-size: 17px;
}
.aboutLHS {
padding-left: 2%;
width: 43%;
margin-right: 4%;
}
.aboutRHS {
width: 49%;
padding-right: 2%;
}
}
@media (max-width: 750px) {
.about-section .middleIt {
flex-direction: column-reverse;
}
.aboutLHS {
width: 80% !important;
margin-right: 0%;
text-align: center;
margin-top: 20px;
}
.aboutRHS {
width: 60% !important;
}
}
@media (max-width: 550px) {
.aboutLHS {
width: 90% !important;
margin-right: 0%;
text-align: center;
margin-top: 17px;
}
.aboutRHS {
width: 80% !important;
}
.about-section h2 {
font-size: 37px;
margin-bottom: 7px;
}
.about-section p {
font-size: 16px;
}
}




/* OPEN SOURCE SECTION */
.opensource-section {
width: 100%;
float: left;
position: relative;
height: auto;
overflow: hidden;
}
.openSourceBack {
width: 100%;
height: auto;
background-image: url('../images/opensource.jpg');
background-size: cover;
background-position: 50% 30%;
content;'';
position: absolute;
top: 0;   
}
.opensource-section .content {
z-index: 9;
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
padding-top: 0vh;
padding-bottom: 60vh;
}
.opensource-section h4 {
width: 35%;
margin-right: 3%;
text-align: right;
color: #fff;
text-transform: uppercase;
letter-spacing: 2.5px;
line-height: 100%;
font-size: 70px;
font-weight: 600;
word-spacing: 100vw;
}
.opensource-section p {
width: 44%;
margin-right: 18%;
color: #fff;
font-size: 23px;
line-height: 150%;
max-width: 390px;
position: relative;
top: -2px;
}
@media (max-width: 1100px) {
.opensource-section h4 {
width: 38%;
margin-right: 3%;
letter-spacing: 2px;
font-size: 62px;
word-spacing: 100vw;
}
.opensource-section p {
width: 41%;
margin-right: 18%;
font-size: 21px;
max-width: 390px;
}
}
@media (max-width: 900px) {
.opensource-section h4 {
width: 38%;
margin-right: 3%;
letter-spacing: 2px;
font-size: 58px;
word-spacing: 100vw;
}
.opensource-section p {
width: 45%;
margin-right: 14%;
font-size: 20px;
max-width: 500px;
}
}
@media (max-width: 750px) {
.opensource-section h4 {
width: 38%;
margin-right: 3%;
letter-spacing: 1.75px;
font-size: 54px;
word-spacing: 100vw;
}
.opensource-section p {
width: 45%;
margin-right: 14%;
font-size: 18px;
max-width: 500px;
}
}
@media (max-width: 680px) {
.opensource-section h4 {
width: 50%;
padding-left: 0.01%;
margin-right: 0%;
text-align: center;
letter-spacing: 1.75px;
font-size: 54px;
word-spacing: 0;
}
.opensource-section p {
width: 50%;
margin-right: 0%;
font-size: 18px;
max-width: 500px;
text-align: center;
}
}
@media (max-width: 550px) {
.opensource-section h4 {
width: 70%;
padding-left: 0.01%;
margin-right: 0%;
text-align: center;
letter-spacing: 1.75px;
font-size: 54px;
word-spacing: 0;
text-shadow: 0px 0px 50px rgba(0, 0, 0, 0.2); 
}
.opensource-section p {
width: 70%;
margin-right: 0%;
font-size: 18px;
max-width: 500px;
text-align: center;
text-shadow: 0px 0px 50px rgba(0, 0, 0, 0.2); 
}
.openSourceBack {
background-position: 50% 60%;
}
.opensource-section .content {
padding-bottom: 80vh;
}
}





/* PROJECTS SECTION */
.projects-section {
background: #fff;
width: 100%;
float: left;
position: relative;
padding: 100px 0;
background-image: url(../images/3colsBG.jpg);
background-size: cover;
background-position: center center;
}
.threeCols_col {
width: 29.3333%;
float: left;
margin: 0 2%;
text-align: center;
position: relative;
opacity: 1;
display: block;
transform: translateY(150px);
}
.threeCols_col img {
width: 90%;
margin: 5%;
height: auto;
z-index: 99999;
position: relative;
}
.threeColImageWrapper {
width: 100%;
float: left;
position: relative;
margin-bottom: 20px;
}
.threeCols_col:nth-child(1) .imageHalo1 {
width: 15vw;
height: 10vh;
border: 1px solid #06cbd2;
z-index: 999;
display: block;
position: absolute;
top: 0;
left: 10%;
opacity: 0.5;
background: #fff;
}
.threeCols_col:nth-child(1) .imageHalo2 {
width: 15vw;
height: 17vh;
border: 1px solid #5c2983;
z-index: 999;
display: block;
position: absolute;
bottom: 0px;
right: 0px;
opacity: 0.27;
background: #fff;
}
.threeCols_col:nth-child(2) .imageHalo1 {
width: 15vw;
height: 17vh;
border: 1px solid #5c2983;
z-index: 999;
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0.27;
background: #fff;
}
.threeCols_col:nth-child(2) .imageHalo2 {
width: 15vw;
height: 18vh;
border: 1px solid #06cbd2;
z-index: 999;
display: block;
position: absolute;
bottom: 0px;
right: 10%;
opacity: 0.5;
background: #fff;
}
.threeCols_col:nth-child(3) .imageHalo1 {
width: 15vw;
height: 17vh;
border: 1px solid #06cbd2;
z-index: 999;
display: block;
position: absolute;
top: 0;
right: 0;
opacity: 0.5;
background: #fff;
}
.threeCols_col:nth-child(3) .imageHalo2 {
width: 15vw;
height: 18vh;
border: 1px solid #5c2983;
z-index: 999;
display: block;
position: absolute;
bottom: 0px;
left: 0px;
opacity: 0.27;
background: #fff;
}
.threeCols_col h4 {
color: #000;
font-size: 40px;
text-transform: uppercase;
line-height: 100%;
font-weight: 600;
margin-top: 30px;
}
.threeCols_col h5 {
color: #000;
font-size: 19px;
text-transform: uppercase;
line-height: 120%;
font-weight: 600;
margin-top: 5px;
}
.threeCols_col p {
color: #333;
font-size: 17px;
line-height: 160%;
margin-top: 10px;
}
.threeCols_col p a {
display: inline-block;
background: #333;
font-size: 18px;
text-transform: uppercase;
color: #fff;
padding: 15px 13px 12px 15px;
font-weight: 600;
letter-spacing: 1px;
}
.threeCols_col p a:hover {
opacity: 0.8;
}
.projects-section .come-in {
transform: translateY(150px);
animation: come-in 0.8s ease forwards;
}
.projects-section .come-in:nth-child(2) {
animation-duration: 1.2s;
}
.projects-section .come-in:nth-child(3) {
animation-duration: 1.6s;
}
.projects-section .already-visible {
transform: translateY(0);
animation: none;
}
@keyframes come-in {
to { transform: translateY(0); transition: opacity;  }
}
@media (max-width: 1300px) {
.threeCols_col h4 {
font-size: 37px;
margin-top: 27px;
}
.threeCols_col h5 {
font-size: 18px;
margin-top: 5px;
}
.threeCols_col p {
font-size: 16px;
margin-top: 10px;
}
.threeCols_col p a {
font-size: 17px;
padding: 15px 13px 12px 15px;
letter-spacing: 1px;
}
}
@media (max-width: 1100px) {
.threeCols_col h4 {
font-size: 34px;
margin-top: 22px;
}
.threeCols_col h5 {
font-size: 17px;
margin-top: 5px;
}
.threeCols_col p {
font-size: 15px;
margin-top: 10px;
}
.threeCols_col p a {
font-size: 16px;
padding: 12px 11px 10px 13px;
letter-spacing: 1px;
}
.threeColImageWrapper {
margin-bottom: 16px;
}
.projects-section {
padding: 80px 0;
}
.threeCols_col:nth-child(1) .imageHalo1 {
width: 13vw;
height: 7vh;
top: 0;
left: 10%;
}
.threeCols_col:nth-child(1) .imageHalo2 {
width: 13vw;
height: 14vh;
bottom: 0px;
right: 0px;
}
.threeCols_col:nth-child(2) .imageHalo1 {
width: 13vw;
height: 14vh;
top: 0;
left: 0;
}
.threeCols_col:nth-child(2) .imageHalo2 {
width: 13vw;
height: 14vh;
bottom: 0px;
right: 10%;
}
.threeCols_col:nth-child(3) .imageHalo1 {
width: 12vw;
height: 14vh;
top: 0;
right: 0;
}
.threeCols_col:nth-child(3) .imageHalo2 {
width: 12vw;
height: 14vh;
bottom: 0px;
left: 0px;
}
}

@media (max-width: 90px) {
.threeCols_col:nth-child(1) .imageHalo1 {
width: 13vw;
height: 5vh;
top: 0;
left: 10%;
}
.threeCols_col:nth-child(1) .imageHalo2 {
width: 13vw;
height: 10vh;
bottom: 0px;
right: 0px;
}
.threeCols_col:nth-child(2) .imageHalo1 {
width: 13vw;
height: 10vh;
top: 0;
left: 0;
}
.threeCols_col:nth-child(2) .imageHalo2 {
width: 13vw;
height: 10vh;
bottom: 0px;
right: 10%;
}
.threeCols_col:nth-child(3) .imageHalo1 {
width: 12vw;
height: 10vh;
top: 0;
right: 0;
}
.threeCols_col:nth-child(3) .imageHalo2 {
width: 12vw;
height: 10vh;
bottom: 0px;
left: 0px;
}
}

@media (max-width: 767px) {
.threeCols_col {
width: 80%;
margin: 0 0 30px 10%;
}
.threeCols_col:last-of-type {
margin-bottom: 0;
}
.threeCols_col h4 {
font-size: 37px;
margin-top: 27px;
}
.threeCols_col h5 {
font-size: 18px;
margin-top: 5px;
}
.threeCols_col p {
font-size: 16px;
margin-top: 10px;
}
.threeCols_col p a {
font-size: 17px;
padding: 15px 13px 12px 15px;
letter-spacing: 1px;
}
.threeColImageWrapper {
margin-bottom: 8px;
}
.projects-section {
padding: 50px 0;
}
.threeCols_col:nth-child(1) .imageHalo1 {
width: 50vw;
height: 7vh;
top: 0;
left: 10%;
}
.threeCols_col:nth-child(1) .imageHalo2 {
width: 58vw;
height: 14vh;
bottom: 10px;
right: 0px;
}
.threeCols_col:nth-child(2) .imageHalo1 {
width: 45vw;
height: 14vh;
top: 0;
left: 0;
}
.threeCols_col:nth-child(2) .imageHalo2 {
width: 35vw;
height: 14vh;
bottom: 10px;
right: 10%;
}
.threeCols_col:nth-child(3) .imageHalo1 {
width: 40vw;
height: 14vh;
top: 0;
right: 0;
}
.threeCols_col:nth-child(3) .imageHalo2 {
width: 45vw;
height: 14vh;
bottom: 10px;
left: 0px;
}
}
@media (max-width: 500px) {
.threeCols_col {
width: 90%;
margin: 0 0 25px 5%;
}
.threeCols_col:last-of-type {
margin-bottom: 0;
}
.threeCols_col h4 {
font-size: 34px;
margin-top: 27px;
}
.threeCols_col h5 {
font-size: 18px;
margin-top: 5px;
}
.threeCols_col p {
font-size: 16px;
margin-top: 10px;
}
.threeCols_col p a {
font-size: 17px;
padding: 15px 13px 12px 15px;
letter-spacing: 1px;
}
.threeColImageWrapper {
margin-bottom: 0px;
}
.projects-section {
padding: 35px 0;
}
}




/* FOOTER */
footer.footer {
width: 100%;
float: left;
text-align: center;
padding: 80px 0 40px;
border-bottom: 10px solid #5c2983;
background-image: url(../images/footerBG.jpg);
background-size: cover;
background-position: center center;
}
footer .newsLink {
display: inline-block;
padding: 20px 30px 15px;
border: 1px solid #fff;
background: rgba(0,0,0,0.5);
color: #fff;
margin: 0 auto;
}
footer .newsLink:hover {
background: rgba(0,0,0,1);
} 
footer .newsLink h5 {
font-size: 30px;
font-weight: 600;
text-transform: uppercase;
}
footer p {
color: #fff;
font-size: 14px;
line-height: 150%;
margin-bottom: 3px;
}
footer p a {
color: #fff;
font-size: 14px;
line-height: 150%;
}
footer p a:hover {
opacity: 0.7;
}
footer .socials {
width: 100%;
float: left;
margin: 80px 0 40px;
}
footer .socials img {
width: 30px;
height: 30px;
}
footer .socials a {
margin: 0 20px;
position: relative;
display: inline-block;
transition: all 0.4s ease-out;
transform: translateY(30px);
top: 0px;
}
footer .socials .come-in {
transform: translateY(30px);
animation: come-in 0.8s ease forwards;
transition: all 0.8s ease-out;
}
footer .socials .come-in:nth-child(2) {
animation-duration: 0.8s;
}
footer .socials .come-in:nth-child(3) {
animation-duration: 1.0s;
}
footer .socials .come-in:nth-child(4) {
animation-duration: 1.2s;
}
footer .socials .come-in:nth-child(5) {
animation-duration: 1.4s;
}
footer .socials .come-in:nth-child(6) {
animation-duration: 1.4s;
}
footer .socials .already-visible {
transform: translateY(0);
animation: none;
}
@keyframes come-in {
to { transform: translateY(0); transition: opacity;  }
}
footer .socials a:hover {
top: -10px;
transition: all 0.4s ease-out;
opacity: 0.7;
}
@media (max-width: 700px) {
footer.footer {
padding: 60px 0 30px;
}
footer .newsLink {
padding: 16px 26px 13px;
}
footer .newsLink h5 {
font-size: 26px;
line-height: 130%;
}
footer .socials {
margin: 60px 0 30px;
}
footer .socials img {
width: 25px;
height: 25px;
}
footer .socials a {
margin: 0 15px;
}
footer p , footer p a {
font-size: 13px;
}
}
@media (max-width: 500px) {
footer.footer {
padding: 50px 0 25px;
}
footer .newsLink {
padding: 14px 22px 11px;
}
footer .newsLink h5 {
font-size: 23px;
line-height: 130%;
}
footer .socials {
margin: 40px 0 25px;
}
footer .socials img {
width: 25px;
height: 25px;
}
footer .socials a {
margin: 0 10px;
}
footer p , footer p a {
font-size: 12px;
}
}
@media (max-width: 450px) {
footer p {
padding-left: 10%;
padding-right: 10%;
}
}


/* Cookies */
body #cookiesContent {
display: none;   
}
.featherlight .featherlight-inner {
display: block !important;
}
#cookiesContent h2 , #cookiesContent h3 , #cookiesContent h4 , #cookiesContent h5 , #cookiesContent p , #cookiesContent li {
margin-bottom: 10px;
}
#cookiesContent p , #cookiesContent li {
margin-bottom: 6px;
color: #444;
}
#cookiesContent a {
color: #000;
}
#cookiesContent h3 , #cookiesContent h4 , #cookiesContent h5 {
margin-top: 10px;
}
#cookiesContent ul {
margin-left: 25px;
}
#cookiesContent li {
margin-left: 15px;
padding-left: 15px;
}
#cookiesContent table {
width: 100%;
margin-bottom: 10px;
}
#cookiesContent table th , #cookiesContent table td {
border: 1px solid #ddd;
}
#cookiesContent table th , #cookiesContent table td {
padding: 5px;
}
.featherlight .featherlight-content {
margin-left: 10% !important;
margin-right: 10% !important;
max-height: 85% !important;
}
@media only screen and (max-width: 1024px) {
.featherlight .featherlight-content {
padding: 20px 20px 0 !important;
border-bottom: 20px solid transparent !important;
margin-left: 7% !important;
margin-right: 7% !important;
}
}
@media only screen and (max-width: 600px) {
#cookiesContent p , #cookiesContent li , #cookiesContent table {
font-size: 14px;
}
}
@media only screen and (max-width: 450px) {
.featherlight-content {
overflow-wrap: break-word;
  word-wrap: break-word;
}
.featherlight .featherlight-content {
padding: 15px 15px 0 !important;
border-bottom: 15px solid transparent !important;
margin-left: 5% !important;
margin-right: 5% !important;
}
#cookiesContent p , #cookiesContent li , #cookiesContent table {
font-size: 13px;
}
}




/* navbar scrolled */
.navbarScrolled {
background: rgba(0, 0, 0, 0.5);
padding: 25px 0;
}