@font-face {
    font-family:"OpenSans";src:url('../assets/fonts/OpenSans-Regular.ttf');
}

:root {
    --primary-right:#1e344d;
    --primary-left:#051d39;
    --primary-text:white;
    --primary-grad:linear-gradient(to right,var(--primary-left),var(--primary-right));
    --primary-gradr:linear-gradient(to right,var(--primary-right),var(--primary-left));
}

* {
    box-sizing: border-box;
    padding: 0;margin:0;
    border-collapse:collapse;
    border-style:solid;border-color:transparent;border-width:0px;
    background-repeat:no-repeat;
    user-select:none;
}

h1,h2,h3,h4,h5,p {user-select:text;}
html,body {height:100vh;width:100%;max-width:100%;}
body {
    font-family:"OpenSans", 'Open Sans', sans-serif;
    background-color:var(--body-color);color:var(--body-text);line-height:1.6;position:relative;min-width:350px;
    /* display:flex;flex-direction:column;justify-content:flex-start; */
    /* text-align:center; */
}
.container {padding:0 20px;max-width:1100px;overflow:auto;text-align:center;margin:auto;}
#content {height:auto;display:block;min-height:calc(100vh - 225px);padding:20px 0;position:relative;}
#content.center {display:flex;flex-direction:column;align-items:center;justify-content:center;}
#content.shaded {background-color:rgba(0,0,0,0.05);}

ul { list-style-type: none;}
a {text-decoration: none;color:inherit;cursor:pointer;} /* var(--secondary-text);} */

h1,h2 {font-weight:300;}/*line-height:1.2;margin:10px 0;}*/
p{ margin:10px 0;}

/* Navbar */
#navbar {background-color:var(--body-color);color:var(--body-text);height:70px;padding: 0;}
#navbar .logo {font-weight:normal;font-family:'Open Sans', sans-serif;font-size:1.7rem;user-select: none;float:left;}
#navbar .logo span {font-weight: bold;}

#navbar .logo a {display:inline-block;}
#navbar .logo::before{
    content:"";
    width:40px;height:40px;background-image:url('../assets/logo_200.png');background-size:contain;
    margin-right:10px;
    display:inline-block;vertical-align: middle;
}
#navlinks {float:right;display:flex;justify-content: space-around; align-items: center;}
#navlinks li {margin:0 10px;}

#navbar a:not(.btn) {color:var(--secondary-text);padding:10px;margin:0 5px;font-weight:bold;user-select: none; }
#navbar a:not(.btn).active {border-bottom-width:2px;border-bottom-color:var(--primary-color);}
#navbar a:not(.btn):hover {border-bottom-width:2px;border-bottom-color:var(--highlight-color);}
.nohover {border-bottom:0;cursor:default;}
#navbar .flex {justify-content: space-between;padding:0;align-items:center;}

/* Footer */
#footer {width:100%;overflow:hidden;
    /* height:30px;line-height:30px; */
}
.footer-box {padding:5px 10px;text-align:left;font-size:0.8rem;vertical-align:top;padding:2rem;}
.gradient {background:var(--primary-grad);color:var(--primary-text);}
#footer-row-1{font-weight:normal;}
#footer-row-2 {font-weight:normal;font-size:0.75rem;height:30px;line-height:30px;background:rgba(0,0,0,0.2);}

/* Showcase */
/* section {z-index:-1} */
.showcase{
    height:600px;color:var(--primary-text);position:relative;
    /* background-color:var(--primary-color); */
    background-image: url('../assets/home_covered_small.png');
    background-size:cover;background-position:center;
    overflow:hidden;
}
.showcase.loaded {background-image: url('../assets/home_covered.png');}
.showcase p {margin:20px 0;}
.showcase .grid {grid-template-columns: 55% 45%;gap:30px;overflow: visible;}
.showcase .flex {flex-direction: row;justify-content: space-between; align-items: center;overflow: visible;}

.showcase-text {padding-right:5px;width:calc(50%);}
.showcase-image {padding-left:5px;width:calc(50%);}
.showcase-image img {width:95%;float:right;}

/* .showcase-form {position:relative;top:60px;height:350px;width:400px;padding:40px;z-index: 100;justify-self:flex-end;} */

/* .showcase-form .form-control {margin:30px 0;}
.showcase-form input[type='text'], .showcase-form input[type='email'] {
    border:0;border-bottom:1px solid #b4becb;width:100%;padding:3px;font-size:16px;
}
.showcase-form input:focus {outline:none;} */

.showcase::before,.showcase::after {
    content:'';position:absolute;height:120px;bottom:-80px;right:0;left:0;background-color:var(--body-color);
    transform:skewY(-3deg);-webkit-transform: skewY(-3deg);-moz-transform: skew(-3deg);
}
.showcase.simple::before, .showcase.simple::after {content:"";display:none;}

.optiminfo {padding:20px 60px;font-size:1em;}
.optiminfo h2 {margin:40px 0 20px 0;font-size:2em}
.optiminfo h3 {margin:40px 0 20px 0;font-size:1.8em}
.optiminfo h4 {margin:20px 0 10px 0;font-size:1.5em;}

.infoicon {width:40px;height:20px;text-align:center;}

/* Abount */
.infobox {padding:20px 40px;}
.infobox .heading {max-width:500px;margin:auto;}
.infobox p {margin:0 auto;}
.infobox p.spaced {margin:10px auto 0 auto;}
.infobox.shaded {background-color:#dcdcdc;border-top:1px solid #eee; }

/* Features */
.stats {margin-top: 100px;background-color:var(--primary-color);color:var(--primary-text);display:none;}
/* .stats .grid p {font-size:16px;font-weight:bold;} */

/* Features */
.features {padding-top: 100px;}
.features .heading {max-width:500px;margin:auto;}
.features .grid h3 {font-size:35px}
.features .grid p {font-size:20px;font-weight:bold;}

/* Stats */
.modules {padding-top: 100px;}
.modules .heading {max-width:500px;margin:auto;}
.modules .grid h3 {font-size:35px}
/* .modules .grid p {font-size:20px;font-weight:bold;}
.modules .grid p.sub {font-size:8rem;font-weight:bold;} */

/* Contact Form */
.form-inputs {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    border-radius: 5px;
}

.form-inputs label {
    font-weight: bold;
}

.form-inputs input, .form-inputs select, .form-inputs textarea {
    width:100%;
    border:1px solid #a0a0a0; /*var(--primary-color);*/
    padding:8px;
    border-radius: 3px;
    background-color:rgba(255,255,255,0.5);
}
.form-inputs input, .form-inputs select {
    border-top:0;border-left:0;border-right:0;
    margin-bottom:10px;
}
#contact-message {height:340px;}

/* Message Box */
#message-back {
    position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;background:rgba(255,255,255,0.8);
    transition:all 1s ease;opacity:0;z-index:1;
}
#message-box {
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;z-index:2;
    width:auto;min-width:300px;transition:all 1s ease;
    padding:20px;font-size:26px;font-weight:bold;text-align:center;
    background-color:white;color:var(--primary-color);border:1px solid var(--primary-color);border-radius:5px;
}
#message-back.active, #message-box.active {opacity:1;}
#message-box.error {color:darkred;}

h2 {margin-bottom:20px;font-weight:bold;color:var(--primary-color);}

.half {width:calc(50% - 8px);display:inline-block;}
.full {width:100%;display:block;}
.talignc {text-align:center;}

.colored {color:var(--primary-color);}

#navtoggle {display:none;cursor:pointer;}
#navtoggle div {
    width:25px;height:3px;margin:5px;
    border-radius:2px;
    background-color:#002f6c;
    transition:all 0.3s ease;
}
#navtoggle.active .line-1 { transform:rotate(-45deg) translate(-5px,6px); }
#navtoggle.active .line-2 { opacity:0;}
#navtoggle.active .line-3 { transform:rotate(+45deg) translate(-5px,-6px); }


.padl50 {padding-left:50px;}
.marr2 {margin-right:2px;}
.marr5 {margin-right:5px;}
.marr20 {margin-right:20px;}

.marl2 {margin-left:2px;}
.marl5 {margin-left:5px;}
.marl10 {margin-left:10px;}

.mart10 {margin-top:10px;}
.mart20 {margin-top:20px;}
.mart40 {margin-top:40px;}

.marb4 {margin-bottom:4px;}
.marb5 {margin-bottom:5px;}
.marb10 {margin-bottom:10px;}

@media screen and (max-width:1100px){
    .container {max-width:100%;}
    #navbar .flex {height:60px;}
}
@media screen and (max-width:950px){
    #navbar .inline {display:none;}
    #navbar {height:60px;}
    #navbar .flex {height:60px;}
    #navbar a:not(.btn) {padding:0;}
    .container.flex {flex-direction:column;}
    #contact-message {height:100px;}
    .footer-box {padding:10px 20px;}

    .showcase {height:auto;text-align:center;}
    .showcase .grid {grid-template-columns:100%;gap:30px;overflow: visible;}
    .container {max-width:100%;}

    .showcase-text {padding-right:0;width:100%;margin-bottom:20px;}
    .showcase-image {padding-left:0;width:100%;}
    .showcase-image img {width:90%;float:none;}

    .showcase::before,.showcase::after {display:none;}

    #navlinks{
        position:absolute;top:60px;right:0;border-radius:2px;
        padding:0;width:0;height:200px;overflow:hidden;
        background-color:#fff;border:1px solid #002f6c;border-radius:2px;
        display:flex;flex-direction: column;align-items:flex-start;justify-content: space-around;
        transition:width 0.3s ease;text-align:left;z-index:1;
    }
    #navlinks li {padding:0 20px;}
    #navlinks .mobile {display:block;}

    #navlinks.active {
        width:200px;overflow:hidden;
        text-align:left;
    }
    /* #navbar .inline {display:none;} */
    #navtoggle {display:block;width:30px;height:30px;}
}
@media screen and (max-width:780px){
    body {overflow-x:hidden;}


    .form-inputs {max-width:calc(100% - 20px);}
    .half {width:100%;display:block;}
    .half.marr5, .half.marl5 {margin:0;}
    .footer-box {width:100%;display:block;padding:1em 0;}

    #contact-message {height:100px;}
}
@media screen and (max-width:400px){
    #navbar {height:40px;}
    #navbar .logo::before{ width:30px;height:30px; }
    #navbar .logo a {font-size:24px;}
    #navbar .flex {height:40px;}
}

@keyframes navLinkFade {
    from { opacity:0;transform:translateX(50px);}
    to{ opacity:1;transform:translateX(0px);}
}