:root {
    --app-height: 100%;
}
body{
    background-color: #042946;
    padding:0px;
    margin:0px;
    font-family: sans-serif;
    font-size: 16px;
    color:#042946;
    user-select: none;
}

header {
    /*background-color: rgb(5, 61, 107);*/
    background-image: linear-gradient(to bottom,#FFF,#EEE);
    position:fixed;top:0px;left: -10px;right:-10px;
    justify-content: center;
    display:flex;
    box-shadow: 0 8px 6px -6px black;
}

header .headerContent:after{
    clear:both;display:block;content:"";
}
header .headerContent{
    max-width:1200px;
    width:100%;
    padding: 0px 20px 20px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #CCCCCC;
}

.main-header {clear:both;display:flex;justify-content: space-between;}
.main-header .Logo {display:flex;align-items:flex-end;color:#000;font-size:20px;height:60px;font-family: sans-serif; background-image: Url("./Logo.webp");background-repeat: no-repeat;background-position: left bottom;background-size: contain;padding-left:60px;}
header nav {
    padding-top: 20px;
    box-sizing: border-box;
    float:right;
}

header .nav ul {list-style-type: none;margin:0px;display:flex;padding:0px;align-items: center}
header .nav > ul > li {
    list-style-type: none;margin:0px;width:auto;
    border-bottom: 2px solid transparent;
    padding: 0px 10px;
}

header .nav > ul > li:hover {
    border-bottom: 2px solid #042946;
}
header .nav > ul > li a {
    color:#042946;
    font-family: sans-serif;
    text-decoration:none;
    white-space: nowrap;
    font-size: 14px;
    display:inline-block;
    padding:10px 0px 5px 0px;
}
header nav.nav > ul > li.navToggler {
    display:none;
}
header nav.nav > ul > li a {
    text-shadow: #CCCCCC;
    font-weight: bold;
    font-size: 18px;
}

.nav.utils-nav { float:right;}
.nav.utils-nav  > ul > li a { ;}

header .nav > ul > li > ul {display:none;}

main {
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
}
main section {
    background-color: #FFF;
}
main section  > div {
    max-width:1200px;
    margin:0px auto;
    box-sizing: border-box;
    padding: 100px 25px 15px 25px;
    min-height:800px;
}
main section a {
    color: #042946;
    text-decoration: none;
}
main section a:hover {
    text-decoration: underline;
}
main section:nth-child(odd) a {
    color:#FFF;
}
main section:nth-child(odd) {
    background-color: transparent;
    color:#FFF;
}

main section#contact > div {min-height:0px;height:auto;padding-top:15px;line-height:18px;text-align: left;}
main section#contact img {border-radius: 15px;border:1px solid #FFF;}

header nav.nav > ul > li.RequestBtn {
    border-bottom:none;
}
header nav.nav > ul > li.RequestBtn a {
    border-radius:5px;
    display:inline-block;
    background-color: #042946;
    color:#FFF;
    padding:10px;
    text-decoration: none;
    font-size:14px;
    height:auto;
}
header nav.nav > ul > li.RequestBtn a:hover {
    background-color: cornflowerblue;
}

main h1,
main h2 {font-size:50px;max-width:600px;line-height:60px;padding-top:40px;}
main p {max-width:500px;}
main section > div {display:flex;align-items: center;justify-content: space-between;}
main section > div > h2 {padding:35px;max-width:400px;align-self: flex-end;text-align:center;line-height:25px;}
main section > div > p {padding:35px;max-width:400px;align-self: flex-end;text-align:center;line-height:25px;}
main section > div > img {max-width:40%;pointer-events: none;height: auto;}
main section > div .img {max-width:40%;flex-wrap: wrap;color:#AAA;padding:20px;text-align: center;box-sizing: border-box;height: auto;}
main section > div .img img {width:100%;flex-wrap: wrap;height: auto;}

ul.contact,
ul.contact > li{padding:0px;margin:0px;list-style-type: none}
ul.contact > li{display:flex;height:30px;align-items: center;gap:10px;}
ul.contact > li a {display:inline-block;padding:4px 0px;}

footer {
    display:flex;
    width:100%;
    justify-content: center;
    color:#80A5C2;
}
footer .copyright { text-align:center;padding:10px;font-size:14px;}
footer .footerContent:after{
    clear:both;display:block;content:"";
}
footer .footerContent{
    max-width:1160px;
    width:100%;
    padding: 20px 0px 20px 0px;
    box-sizing: border-box;
    border-top: 1px solid #406582;
    margin-top:30px;
    margin-left:10px;
    margin-right:10px;
}

footer .nav ul {list-style-type: none;margin:0px;display:flex;padding:0px;align-items: center}
footer .nav > ul > li {
    list-style-type: none;margin:0px;width:auto;
    padding: 0px 20px 0px 0px;
}

footer .nav > ul > li a {
    color: #406582;
    font-family: sans-serif;
    text-decoration:none;
    white-space: nowrap;
    font-size: 14px;
    display:inline-block;
    padding:10px 0px 5px 0px;
}

@media (max-width:767px){
    main section > div {flex-wrap: wrap;min-height:100vh;align-content:space-between;text-align: center;
        min-height: var(--app-height);}
    main section > div .img,
    main section > div img  {max-width:100%;height: auto;}
    main h1, main h2 {padding-top:0px; font-size:30px;line-height:38px;}
    header nav.nav {z-index:100000;opacity:0;transition:opacity 250ms linear;transition-delay:250ms;pointer-events:none;position:fixed;top:0px;left:0px;right:0px;bottom:0px;width:100%;height:100%;background-color:rgba(0,0,0,0.5);overflow:hidden;}
    header nav.nav > ul {padding-top:55px;padding-left:15px;box-sizing:border-box;position:absolute;transition:right 250ms linear;top:0px;right:-100%;bottom:0px;width:70%;height:100%;background-color:#FFF;flex-wrap: wrap;align-content:flex-start;overflow-y:auto;}
    header nav.nav > ul > li {display:block;width:100%;}
    header nav.nav > ul > li.RequestBtn {padding-top:30px;}
    header nav.nav ul + .navToggler { opacity:0;}
    header nav.nav.active ul + .navToggler {
        content:"";
        display:block;
        width:30px;
        height:30px;
        position:absolute;
        top:20px;right:20px;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="black" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>');
        opacity:1;
        transition: opacity 250ms linear;
        transition-delay: 300ms;
    }

    header .main-header > .navToggler {
        content:"";
        display:block;
        width:30px;
        height:30px;
        position:absolute;
        top:30px;right:25px;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>');
    }

    header nav.active {opacity:1;transition:opacity 250ms linear;pointer-events:auto;}
    header nav.active > ul {right:0%;transition:right 250ms linear;}

    ul.contact > li{height:50px;}
    ul.contact > li a {padding:10px 0px;}

}

#toTop {
    position:fixed;
    right:20px;
    bottom:50px;
    background-color:rgba(0,0,0,0.5);
    color:#FFF;
    padding:15px;
    text-align:center;
    border-radius: 7px;
    cursor:pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms linear;
}

#toTop.active {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 250ms linear;
}
