/*Nav Container*/
.nav-container{
    position:fixed;
    top:0;
    width:100%;
    z-index:20;
    transition:0.5s;
    transform-origin: top;
    transform-box: fill-box;
    -webkit-transform-origin: top;
    -webkit-transform-box: fill-box;
    -moz-transform-origin: top;
    -moz-transform-box: fill-box;
    -ms-transform-origin: top;
    -ms-transform-box: fill-box;
    -o-transform-origin: top;
    -o-transform-box: fill-box;
}
.nav-container-down{
    background-color: #999999;
}
#landing-nav{
    z-index:20 !important;
    position:relative;
}
#navbarToggler{
    transition:0.3s;
    transform-origin: left;
    transform-box: fill-box;
}
.landing-nav-up{
    background-color: transparent !important;
}
li.nav-item.landing{
    border: solid 1px white;
    border-radius:5px;
    margin-right:5px;
    width:150px;
    text-align:center;
}
li.nav-item.landing.landing-up{
    background-color:transparent;
    transition:0.3s;
}
li.nav-item.landing.landing-up:hover{
    background-color:#95cccc !important;
}
li.nav-item.landing.landing-down{
    background-color:black;
}
.active{
    background-color:#00698a !important;
    border-radius:5px;
    transition:0.3s;
}
li.nav-item.landing.landing-down:hover{
    background-color:#00698a;
}
#brand-img{
    height:40px;
    width:auto;
}
.nav-brand-invisible{
    display: none;
}
.nav-brand-visible{
    animation-name: slideRight;
    -webkit-animation-name: slideRight; 
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;
    display: block !important;
}
.progress-container{
    width: 100%;
    height: 8px;
    background: #ccc;
    position:relative;
    visibility:hidden;
}
.progress-bar{
    height: 8px;
    background: #95cccc;
    width: 0%;
    transition: 0s;
}
.progress-visible{
    visibility:visible;
}
@keyframes slideRight{
    0% {
        transform: translateX(-150%);
    }
    100%{
        transform: translateX(0%);
    }
}
/*======*/
/*Landing Container*/
body:before {
    content: "";
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: -20;
    background: #000116 url(../resources/stars.png);
    -webkit-background-size: 70%;
    -moz-background-size: 70%;
    -o-background-size: 70%;
    background-size: 70%;
}
#landing-wrapper{
    position:relative;
    z-index:10;
    height:100vh;
}
#landing-page{
    height:100vh;
    width:100%;
    position:fixed;
    z-index:-10;
}
#logo-container{
    width:100%;
    height:100vh;
}
#logo-div{
    z-index:10;
    text-align:center;
    margin-top:1%;
    width:50%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background: url(../resources/logo-bg.png) center;
    background-size: 68%;
    background-repeat: no-repeat;
    padding:10%;
    animation: backgroundPulse 1.25s alternate infinite ease-in-out;
    -webkit-animation: backgroundPulse 1.25s alternate infinite ease-in-out;
    -moz-animation: backgroundPulse 1.25s alternate infinite ease-in-out;
    -ms-animation: backgroundPulse 1.25s alternate infinite ease-in-out;
    -o-animation: backgroundPulse 1.25s alternate infinite ease-in-out;
}
#logo{
    width:100%;
    height:100%;
}
.twinkling{
	width:100%;
    height: 100%;
    background: transparent url(../resources/twinkling2.png) top center;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left:0;
    z-index: -10;
    -moz-animation:move-twink-back 1000s linear infinite;
    -ms-animation:move-twink-back 1000s linear infinite;
    -o-animation:move-twink-back 1000s linear infinite;
    -webkit-animation:move-twink-back 1000s linear infinite;
    animation:move-twink-back 1000s linear infinite;
}
#arrow-down-div{
    position:absolute;
    width:100%;
    bottom:0;
    text-align:center;
    padding:50px;
    opacity:1;
    z-index:20;
}
#arrow-down{
    width:50px;
    height:auto;
    animation: arrow-down-anim 1.5s infinite ease-in-out;
    -webkit-animation: arrow-down-anim 1.5s infinite ease-in-out;
    -moz-animation: arrow-down-anim 1.5s infinite ease-in-out;
    -ms-animation: arrow-down-anim 1.5s infinite ease-in-out;
    -o-animation: arrow-down-anim 1.5s infinite ease-in-out;
    z-index:20;
}
@keyframes backgroundPulse{
    from{background-size: 68%;}
    to{background-size: 60%;}
}
@-webkit-keyframes backgroundPulse{
    from{background-size: 68%;}
    to{background-size: 60%;}
}
@-moz-keyframes backgroundPulse{
    from{background-size: 68%;}
    to{background-size: 60%;}
}
@-ms-keyframes backgroundPulse{
    from{background-size: 68%;}
    to{background-size: 60%;}
}
@-o-keyframes backgroundPulse{
    from{background-size: 68%;}
    to{background-size: 60%;}
}
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@keyframes arrow-down-anim {
    0% {
      transform: translateY(0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translateY(20px);
      opacity: 0;
    }
}
@-webkit-keyframes arrow-down-anim {
    0% {
      -webkit-transform: translateY(0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(20px);
      opacity: 0;
    }
}
@-moz-keyframes arrow-down-anim {
    0% {
      -moz-transform: translateY(0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      -moz-transform: translateY(20px);
      opacity: 0;
    }
}
@-ms-keyframes arrow-down-anim {
    0% {
      -ms-transform: translateY(0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      -ms-transform: translateY(20px);
      opacity: 0;
    }
}
@-o-keyframes arrow-down-anim {
    0% {
      -o-transform: translateY(0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      -o-transform: translateY(20px);
      opacity: 0;
    }
}
/*======*/
/*Main Container*/
#main-wrapper{
    position:relative;
    z-index:10;
}
.page-heading-container{
    position:relative;
    width:100%;
}
.page-heading-left{
    width:80%;
    height: 100%;
    background-color:#00698a;
    margin:0;
    float:left;
}
.page-heading-right{
    width:20%;
    height: 100%;
    margin:0;
    padding:0;
    float:right;
    background-color: #00698a;
    transform-origin: top left;
}
.heading{
    color:#d7d7d7;
    transform:translateY(50%);
    margin-left: 2%;
}
.heading > h1{
    font-family: 'Permanent Marker', cursive;
}
.emphasize-text{
    font-weight:bold;
}
/*======*/
/*Home Page*/
#home{
    font-family: 'lato', sans-serif;
    font-size: 20px;
    background-color:#d7d7d7;
}
#home-content{
    position:relative;
    margin: 1%;
    font-family: 'lato', sans-serif;
    font-size: 20px;
}
#choose-bluemoon{
    background-color: #00698a;
    font-family: 'lato', sans-serif;
    padding:10px;
}
#choose-bluemoon > h3{
    color:#d7d7d7;
    font-family: 'lato', sans-serif;
    margin:10px 10px 20px 10px;
}
.choose-jumbotron{
    padding:15px;
    text-align:center;
    background-color:#d7d7d7;
}
.info-img{
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    margin-bottom:20px;
}
#ideas{
    background-image: url(../resources/svg/lightbulb.svg);
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
}
#attention{
    background-image: url(../resources/svg/bullhorn.svg);
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
}
#user-friendly{
    background-image: url(../resources/svg/desktop.svg);
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
}
#mobile-friendly{
    background-image: url(../resources/svg/mobile.svg);
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
}
/*======*/
/*Inter-div*/
.inter-div{
    height:15vh;
    width:100%;
    position:relative;
}
/*======*/
/*About Page*/
#about{
    font-family: 'lato', sans-serif;
    font-size: 20px;
    background-color:#d7d7d7;
}
#about-content{
    position:relative;
    margin: 1%;
    font-family: 'lato', sans-serif;
    font-size: 20px;
}
#about-img-1-container, #about-img-2-container{
    text-align:center;
    padding:20px;
}
#about-img-1, #about-img-2{
    width:100%;
    height:auto;
    border-radius:10px;
}
#about-1-container, #about-2-container{
    padding:20px;
}
#about-jumbotron{
    margin:20px 15px 20px 15px; 
    background-color:white;
    border-radius:20px;
    padding:20px;
}
#mission-vision{
    background-color: #00698A;
    padding:10px;
    font-family: 'lato', sans-serif;
}
#mission-vision > .row > .col-lg-6 > h2{
    color:white;
    margin-left: 1%;
}

#mission-vision > .row > .col-lg-6 > p{
    color:white;
    margin-left: 1%;
    font-size: 20px;
}
/*======*/
/*Services Page*/
#services{
    font-family: 'lato', sans-serif;
    font-size: 20px;
    background-color:#d7d7d7;
}
#services-content{
    position:relative;
    margin: 1%;
    font-family: 'lato', sans-serif;
    font-size: 20px;
}
#service-img-1-container{
    text-align:center;
    padding:20px;
}
#service-img-1{
    width:90%;
    height:auto;
    border-radius:10px;
}
#service-1-container{
    padding:20px;
}
#services-jumbotron{
    margin:20px 15px 20px 15px;
    background-color:white;
    border-radius:20px;
    padding:20px;
}
#services-jumbotron > h4{
    color:#00698A;
    margin-left: 1%;
    font-weight:bold;
}
#service-details{
    padding:25px 50px 15px 50px;
}
#services-list{
    position:relative;
    list-style: none;
    font-weight:bold;
}
#services-list > li{
    position:relative;
    margin-bottom:30px;
}
.fa-li{
    font-size:22.5px;
    color:#00698A;
}
#technologies{
    background-color: #00698A;
    padding:10px;
    font-family: 'lato', sans-serif;
}
#tech-desc{
    color:white;
    padding:15px;
}
#service-img-2-container{
    text-align:right;
    padding:15px;
}
#service-img-2{
    height:auto;
    width:65%;
    border-radius:10px;
}
/*======*/
/*Contact Page*/
#contact{
    font-family: 'lato', sans-serif;
    font-size: 20px;
    background-color:#d7d7d7;
}
#contact-desc{
    position:relative;
    margin: 1%;
    font-family: 'lato', sans-serif;
    font-size: 20px;
}
#contact-desc > p{
    margin-bottom:5px;
}
#contact-page-left{
    width:100%;
    height:100%;
    padding:20px;
    position:relative;
}
#img-sat{
    width:50%;
    height:auto;
}
#contact-details{
    padding:15px;
    margin-top:100px;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    height:auto;
}
#contact-details-mobile{
    display:none;
    margin-top:50px;
    margin-left:auto;
    margin-right:auto;
}
#email-mobile, #phone-mobile, #location-mobile{
    width:100%;
    height:auto;
    padding:20px;
    margin-left:auto;
    margin-right:auto;
    border-radius:10px;
    text-align:center;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
    font-size:5.5vw;
    margin-bottom:20px;
}
#email-mobile, .email-logo-1{
    background-color:#00698A;
    fill: #ebebeb;
}
#email-mobile-link{
    text-decoration: none;
    color:#ebebeb;
}
#email-mobile:hover{
    background-color:#95cccc;
}
#email-mobile:hover #email-mobile-link{
    color:black;
}
#email-mobile:hover .email-logo-1{
    fill:black;
}
#phone-mobile{
    border:solid 1px black;
    background-color:white;
}
#location-mobile{
    border:solid 1px black;
}
#phone-mobile > p, #location-mobile > p{
    margin:0;
}
#contact-form{
    background-color:#d7d7d7;
    padding:25px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
}
label{
    color:#00698A;
    font-weight:bold;
    font-size:20px;
    float:left;
    margin:0 10px 0 0;
}
input[type=text]{
    width: 100%;
    padding: 15px;
    margin: 5px 0 12px 0;
    border: none;
    background: #ffffff;
    float:left;
}
.form-info{
    float:left;
}
input[type=text]:focus{
    background-color: #f1f1f1;
    outline: none;
}
#query-box{
    height:150px;
    width: 100%;
    display: block;
    resize: vertical;
    margin-bottom: 25px;
}
#query-box:focus{
    background-color:#f1f1f1;
    outline:none;
}
.btn-submit{
    background-color:#00698A;
    color: #d7d7d7;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom:10px;
    opacity: 0.8;
    font-weight:bold;
    font-size:20px;
}
.btn-submit:hover{
    opacity: 1;
    color:white;
}
/*======*/
/*Footer*/
#footer{
    position:relative;
    background-color:#00698a;
    padding:10px 10px 1px 10px;
}
.footer-headings, #footer-nav{
    color:#d7d7d7;
}
#footer-contact{
    color:#d7d7d7;
    list-style:none;
}
#footer-contact > li{
    position:relative;
    margin-bottom:5px;
}
#footer-contact > li > a, #footer-nav > li >a{
    color:#d7d7d7;
    transition:0.3s;
    text-decoration:none;
}
#footer-contact > li > a:hover, #footer-nav > li >a:hover{
    color:black;
}
.footer-icon{
    color:#d7d7d7;
    font-size:20px;
    transition:0.3s;
}
#footer-contact > li > a:hover .footer-icon{
    color:black;
}
#footer-copyright{
    margin-top:10px;
    text-align:center;
    color:rgb(170, 170, 170);
    width:100%;
}
/*======*/
/*Back To Top Button*/
#topBtn {
    position: fixed;
    bottom: 50px;
    right: 15px;
    text-align:center;
    font-size: 18px;
    border-radius: 25px;
    background-color:#999999;
    border:none;
    display:none;
    transition: 0.8s;
    transition: background-color 0.4s;
    outline:none;
    z-index:30;
    padding:7.5px 14px 7.5px 14px;
}
#topBtn:hover{
    background-color:#8fcad1;
}
/*======*/
/*Loading Screen*/
/*
#loading-screen{
    height:100vh;
    width:100vw;
    position:fixed;
    top:0;
    left:0;
    z-index:50;
    background-color:#d7d7d7;
}
.outer {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.middle {
    display: table-cell;
    vertical-align: middle;
}
.inner {
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    text-align:center;
}
*/
/*======*/
/*Custom Font*/
@font-face{
    font-family: "nasalization";
    src: url(../resources/font/nasaliza-webfont.woff) format("woff"),
    url(../resources/font/nasaliza-webfont.woff2) format("woff2"),
    url(../resources/font/nasaliza.ttf) format("truetype"),
    url(../resources/font/nasaliza.otf) format("opentype");
}
/*======*/
/*Scalability*/
@media screen and (min-width:1200px){
    .page-heading-container{
        height:100px;
    }
    .choose-pic-heading{
        height:225px;
        width:auto;
    }
    .info-img{
        height:125px;
        width:225px;
    }
    .choose-info{
        width:auto;
        height:400px;
        font-size:17px;
    }
}
@media screen and (max-width:1199px){
    .page-heading-container{
        height:90px;
    }
    .heading > h1{
        font-size:35px;
    }
    .choose-pic-heading{
        height:210px;
        width:auto;
    }
    .info-img{
        height:110px;
        width:200px;
    }
    .choose-pic-heading > h3{
        font-size:25px;   
    }
    .choose-info{
        width:auto;
        height:400px;
        font-size:15px;
    }
}
@media screen and (max-width:1050px){
    #logo-div{
        margin-top:5%;
    }
    .choose-pic-heading{
        height:180px;
        width:auto;
    }
    .info-img{
        height:95px;
        width:175px;
    }
    .choose-info{
        width:auto;
        height:350px;
        font-size:1.4vw;
    }
}
@media screen and (max-width:1049px) and (min-width:768px){
    .info-img{
        height:80px;
        width:100px;
    }
    .choose-pic-heading > h3{
        font-size:20px;
    }
    .choose-info{
        width:auto;
        height:380px;
        font-size:1.4vw;
    }
}
@media screen and (min-width:992px){
    .nav-container-down{
        transform: scaleY(0.75);
        -webkit-transform: scaleY(0.75);
        -moz-transform: scaleY(0.75);
        -ms-transform: scaleY(0.75);
        -o-transform: scaleY(0.75);
    }
    .landing-nav-down{
        transform: scaleX(0.75);
    }
}
@media screen and (max-width:991px){
    body:before{
        min-height:125vh;
        background-size: 80%;
    }
    #nav-brand{
        display:none !important;
    }
    li.nav-item.landing{
        width:100%;
        margin:0 0 10px 0;
    }
    li.nav-item.landing.landing-up{
        background-color:#000116;
    }
    .twinkling{
        height:90vh;
        max-height:90vh;
    }
}
@media screen and (max-width:991px) and (min-width:768px){
    #about-img-1, #about-img-2{
        width:50%;
        height:auto;
    }
}
@media screen and (max-width:920px){
    #logo-div{
        margin-top:10%;
        width:65%;
    }
    #logo{
        width:85%;
        height:85%;
    }
    .page-heading-container{
        height:75px;
    }
    .heading > h1{
        font-size:30px;
    }
}
@media screen and (min-width:881px){
    .page-heading-right{
        transform: skew(-60deg, 0deg);
    }
}
@media screen and (max-width:880px) and (min-width:531px){
    .page-heading-right{
        transform: skew(-45deg, 0deg);
    }
}
@media screen and (max-width:767px){
    #logo-container{
        display: flex; 
        align-items: center; 
        justify-content: center;
    }
    #logo-div{
        margin-top:0;
        width:75%;
    }
    #choose-bluemoon > h3{
        text-align:center;
    }
    .choose-info{
        width:auto;
        height:auto;
        font-size:17px;
    }
    #service-img-2-container{
        text-align: left;
    }
    #contact-form{
        padding:15px;
        border-top:dashed 1px black;
    }
}
@media screen and (max-width:767px) and (min-width:531px){
    .page-heading-container{
        height:70px;
    }
    .page-heading-left{
        width:95%;
    }
    .page-heading-right{
        width:5%;
        transform: skew(-20deg, 0deg);
    }
    .heading > h1{
        margin-top:5px;
        font-size:25px;
    }
    #about-img-1, #about-img-2, #service-img-1{
        width:65%;
        height:auto;
    }
    #service-img-2{
        width:50%;
    }
}
@media screen and (max-width:530px){
    body:before{
        min-height:125vh;
        background-size: 90%;
    }
    #logo-container{
        display: flex; 
        align-items: center; 
        justify-content: center;
    }
    #logo-div{
        width:100%;
        margin-top:0;
    }
    #logo{
        width:80%;
        height:80%;
    }
    #arrow-down-div{
        bottom:30px !important;
    }
    .page-heading-left{
        width:100%;
    }
    .page-heading-right{
        display:none;
    }
    .heading{
        text-align:center;
        width:100%;
        height:40px;
        margin:0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    .heading > h1{
        font-size:20px;
    }
    #home-content, #about-content, #services-content{
        font-size:18px;
        padding:10px;
    }
    #mission-vision > .row > .col-lg-6 > p, #tech-desc{
        font-size:18px;
    }
    #choose-bluemoon > h3{
        text-align:center;
        font-size:25px;
    }
    #about-img-1, #about-img-2, #service-img-1{
        width:85%;
        height:auto;
    }
    #about-1-container, #service-1-container{
        padding-top:0;
        padding-bottom:0;
        margin-top:25px;
    }
    #about-img-1-container, #about-img-2-container, #service-img-1-container{
        padding:0;
    }
    #services-jumbotron > h4{
        font-size:20px;
        text-align: center;
    }
    #service-details{
        padding:25px 5px 15px 5px;
    }
    #service-img-2-container{
        padding:10px;
    }
    #contact-desc{
        padding:10px;
        font-size:18px;
    }
    #contact-details{
        display:none;
    }
    #contact-details-mobile{
        display:block;
    }
    #contact-form{
        padding:15px;
        border-top:dashed 1px black;
    }
}
/*======*/
/*Contact-Mobile-SVG*/
#email-mobile-logo{
    width:25%;
    height:auto;
    margin-bottom:15px;
}
#phone-mobile-logo{
    width:15%;
    height:auto;
    margin-bottom:15px;
}
#location-mobile-logo{
    width:10%;
    height:auto;
    margin-bottom:15px;
}
.location-logo-1{
    fill: #ebebeb;
    stroke: #000;
    stroke-miterlimit: 10;
}
/*======*/