﻿*{margin:0;padding:0}
*, *:before, *:after {box-sizing: inherit;}
html {font-size: calc(15px + 0.390625vw);scroll-behavior: smooth;}
body{overflow:hidden;overflow-y:scroll;width:100%;scroll-padding-top:3.022em;scroll-snap-type: y proximity;}
body{font-size:100%;font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;color:#000000;}
a {color:inherit;text-decoration:none;}
#div_bar{position:fixed;height:3.022em;top:0;left:0;right:0;background-color:#FFF;z-index:1000;border-bottom: solid 1px #E5E5E5;}
#div_bar table{width:100%;height:3.022em;}
#div_bar img{height:2.5em;}
#tbl_men{border-spacing:0.5em 0;}
.ttd_opt{color:#FFF;font-weight:500;text-align:center;width:1px;white-space:nowrap;}
.ttd_opt div{background-color:rgba(2,47,70,1);padding:0.25em;min-width:5em;margin:auto auto;}
.ttd_opt div:hover{cursor:pointer;text-decoration:underline;background-color:rgba(79,124,147,1);}
#div_cnt{position:absolute;top:3.022em;left:0;right:0;}
#objectives,#projects,#about,#contacts{padding:1vh 1vh;scroll-snap-align:start;scroll-margin-top:3.022em;}
#objectives{min-height:calc(100vh - 3.022em);color:#FFF;}
#projects,#contacts{color:#000;background-color:rgba(2, 48, 71, 0.05);}
#about{color:#FFF;background-color:rgba(2,47,70,1);}
#footer{margin:2em;background-color:#000;color:#FFF;margin:0;}
#footer ul{list-style:none;}
#footer > div:nth-child(1) > div:nth-child(2) div { text-align: left; }

#tbl_men > tbody > tr:nth-child(1) > td:nth-child(1) {vertical-align:bottom;}
#tbl_men > tbody > tr:nth-child(1) > td:nth-child(1) a {display: inline-flex; align-items: center;}
#tbl_men > tbody > tr:nth-child(1) > td:nth-child(1) span {padding-left:0.25em;font-size:1.3em;}

#objectives{
    background-image:url('../../images/backgrounds/index.jpg');
    background-repeat:no-repeat no-repeat;  
    background-size: cover;
    background-position: center center;
    height: calc(100vh - 3.022em);
}
.container {float:none;clear:both;width:80%;margin:20% 0 0 5%;display:block;}
.word {float:left;opacity:0; position:absolute;}
.word > div:nth-child(1){font-size: 4em;font-weight:bold;}
.word > div:nth-child(2){font-size: 2em;}
.w1 {animation: w1anim 20s infinite;}
.w2 {animation: w2anim 20s infinite;}
.w3 {animation: w3anim 20s infinite;}
.w4 {animation: w4anim 20s infinite;}
.w5 {animation: w5anim 20s infinite;}

@keyframes w1anim {
  0%{opacity: 0;}
  10%{opacity: 1;}
  20%{opacity:0;}
}
@keyframes w2anim {
  20%{opacity: 0;}
  30%{opacity: 1;}
  40%{opacity:0;}
}
@keyframes w3anim {
  40%{opacity:0;}
  50%{opacity:1;}
  60%{opacity:0;}
}
@keyframes w4anim {
  60%{opacity: 0;}
  70%{opacity: 1;}
  80%{opacity:0;}
}
@keyframes w5anim {
  80%{opacity: 0;}
  90%{opacity: 1;}
  100%{opacity:0;}
}

/* About Grid */
.grid-abo {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.grid-abo div {
    margin: 1em;
}
.grid-abo div > div:nth-child(1) {
    font-weight: 600;
    font-size: 1.1em;
}

/* Contacts Grid */
.grid-ctc {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.grid-ctc div {margin:1em;}
.grid-ctc .tc1,.tc2 {width:100%;}
.grid-ctc .tc1 {border-spacing:0 0.5em;}
.grid-ctc .tc2 {border-spacing:0;}
.grid-ctc .tc1 tr:nth-child(n) > td:nth-child(1) {width:1px;overflow:hidden;white-space:nowrap!important;padding-right:0.25em;}
.grid-ctc .tc1 tr:nth-child(n) > td:nth-child(2) {width:100%;border:solid 1px #E5E5E5;background-color:#FFF;border-radius:0.25em;}
.grid-ctc .tc2 tr:nth-child(1) > td:nth-child(1) {width:100%;border:solid 1px #E5E5E5;background-color:#FFF;border-radius:0.25em;}

.grid-ctc input[type=text], .grid-ctc input[type=email], .grid-ctc textarea {
    outline: none;
    border: none;
    font-size: 0.9em;
    margin:0 0.25em;
    padding: 0.25em 0;
    width: calc(100% - 8px);
}
.grid-ctc textarea {
    font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;color:#000000;
    padding:0;
    height: 15em;
    resize: none;
}

#div_blk {
    display: none;
    background-color:#F00;
    color:#FFF;
    z-index:3000;
    left:50%;
    top:0;
    padding:0.5em;
    position:fixed;
    transform:translateX(-50%);
}
#div_snd {
    float: none;
    clear: both;
    margin: 0.5em 0 0 0.5em;
}
#spn_rst {
    margin: 0 0.5em;
    float: left;
    line-height: 1.5em;
    overflow: hidden;
    white-space: nowrap !important;
    text-overflow: ellipsis;
    width: 50%;
}
#cmd_snd {
    background-color: rgba(8, 125, 218, 1);
    margin: 0;
    padding: 0.25em;
    width: 5em;
    min-width: 5em;
    color: #FFF;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    font-size: 1em;
    border: none;
    cursor: pointer;
    user-select: none;
    float: right;
}
#cmd_snd:hover{ background-color: rgba(8, 125, 218, 0.7);}
#cmd_snd:disabled {background-color: rgba(127, 127, 127, 0.7);}
#img_cnt {
    background-image: url('../../images/backgrounds/contacts.jpg');
    background-repeat: no-repeat no-repeat;
    background-size: cover;
    background-position: center center;
}
#img_cnt div {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 100%;
}
#img_cnt div div {
    color: #FFF;
    font-size: 4em;
}
.c1 {animation: c1anim 5s infinite;}
@keyframes c1anim {
  0%{opacity: 0;}
  50%{opacity: 1;}
  100%{opacity:0;}
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding: 0.5em;
}

.grid-container div {
    margin: 1em;
}

.grid-container div > div:nth-child(1) {
    font-weight: 600;
    font-size: 1.1em;
}

#img_abo {
    background-image: url('../../images/backgrounds/cryptobotstation.png');
    background-repeat: no-repeat no-repeat;
    background-size: contain;
    background-position: center center;
    min-height: calc(50vh - 3.022em);
}

.cnt_adr {
    float: right;
    margin: 11% 19% !important;
    color: #000;
    font-size: 1.3em !important;
    font-weight: 600 !important;
}

/* Footer Grid */
.grid-foo {
    color: rgba(255,255,255,1);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1.8fr 0.2fr;
    grid-template-areas:
        "f01 f02 f03"
        "cpy cpy cpy";
}
.grid-foo div { margin: 1em;}
.grid-foo .cpy { grid-area: cpy;text-align: center;font-size: 0.7em;line-height: 4em; }
.grid-foo .f01 { grid-area: f01; }
.grid-foo .f02 { grid-area: f02; }
.grid-foo .f03 { grid-area: f03; }

 /* Footer Interactive */
.grid-foo .f01 h1 { font-size: 1.1em; font-weight: normal; }
.grid-foo .f01 h2 { font-size: 0.7em; font-weight: normal; }
.grid-foo .f01 table { margin-top: 12%; }
.grid-foo .f01 table tr:nth-child(1) td:nth-child(1) { vertical-align:top;padding-right:0.25em;}
.grid-foo .f01 table tr:nth-child(1) td:nth-child(1) img{ width: 2.5em; }
.grid-foo .f02 div:nth-child(1) { font-size:1.2em; font-weight: 600; margin:0 0 0.5em 0; }
.grid-foo .f02 li:nth-child(n) { font-size:0.9em; }
.grid-foo .f03 div:nth-child(1) { font-size:1.2em; font-weight: 600; margin:0 0 0.5em 0; }
.grid-foo .f03 li:nth-child(n) { font-size:0.9em; }

.grid-foo a:hover{ font-style: italic!important; }

.top-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    height: 3.022em;
}

.menu {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu > li {
    margin: 0 1em;
    overflow: hidden;
}

.menu-button-container {
    display: none;
    height: 100%;
    width: 1.829em;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#menu-toggle {
    display: none;
}
/*https://alvarotrigo.com/blog/hamburger-menu-css */
.menu-button,
.menu-button::before,
.menu-button::after {
    display: block;
    background-color: #000;
    position: absolute;
    margin-right: 1.5em;
    height: 0.25em;
    width: 2em;
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 0.25em;
}

.menu-button::before {
    content: '';
    margin-top: -0.488em;
}

.menu-button::after {
    content: '';
    margin-top: 0.488em;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
    background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
    margin-top: 0px;
    transform: rotate(-405deg);
}

.top-nav{display:none;}
/* Menu Icon */

.grecaptcha *{margin:0!important;}

/* https://blog.logrocket.com/create-responsive-mobile-menu-with-css-no-javascript/ */
@media (max-width: 600px) {
    #lbl_tit{display:none;}
    .grid-container{display: block;}
    #tbl_men{display:none;}

    .word > div:nth-child(1) {
        font-size: 3em;
        font-weight: bold;
    }

    .word > div:nth-child(2) {
        font-size: 1em;
    }

    .grid-container, .grid-abo, .grid-ctc {
        grid-template-columns: 1fr;
    }
    .grid-ctc {
        grid-template-rows: 1fr 20em;
    }

    #div_bar img {vertical-align: middle;}
    .top-nav{display:flex;}
    .top-nav div{padding: 0.3em;}
    .top-nav div img {}
    .menu-button-container {display: flex;}
    .menu {
        position: absolute;
        top: 0;
        margin-top: 50px;
        left: 0;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        z-index: 2000;
    }

    #menu-toggle ~ .menu li {
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    #menu-toggle:checked ~ .menu li {
        border: 1px solid #333;
        height: 2.5em;
        padding: 0.5em;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
        line-height: 2.25em;
    }

    .menu > li {
        justify-content: center;
        margin: 0;
        padding: 0.5em 0;
        width: 100%;
        color: white;
        background-color: #222;
    }

    .menu > li:not(:last-child) {
        border-bottom: 1px solid #444;
    }

    .menu > li a {
        display: inline-block;
        width: 100%;
        height: 100%;
        text-align: center;
    }

    /* Contact Mobile */
    #img_cnt div {
        margin: 0;
    }
    #img_cnt div div {
        font-size: 2.5em;
    }
    #spn_rst {
        line-height: 1.8em;
    }
    #cmd_snd {
        min-height: 1.8em;
        font-size: 1.5em;
        line-height: 1.8em;
    }

    /* Footer Mobile */
    .grid-foo {
        grid-template-columns: 1fr;
        grid-template-areas:
            "f02"
            "f03"
            "cpy";
    }
    .grid-foo div:nth-child(n) div:nth-child(1) { margin-bottom:1em!important; font-size: 1.4em!important; }
    .grid-foo .f01 { display: none; }
    .grid-foo .f02 li:nth-child(n) { font-size: 1.2em; padding-left: 0.5em; }
    .grid-foo .f03 li:nth-child(n) { font-size: 1.2em; padding-left: 0.5em; }
    .grid-foo .f02 li:not(:last-child){margin-bottom:1em; }
    .grid-foo .f03 li:not(:last-child){margin-bottom:1em; }
    .grid-foo .cpy { font-size: 1em; }
}
