@charset "utf-8";
/* GNet Infographic CSS */

#animation_container, #_preload_div_ {
	position:absolute;
	margin:auto;
	left:0;
    right:0;
	top:0;
    bottom:0;
    z-index: 10;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', 'San Francisco', helvetica, arial, sans-serif;   
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

table.main {
    width: 800px;
    height: 100%;
}

video {  
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -5;
}

#bgr {
    width: 700px;
    height: 1200px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.border_blue {
  position: fixed;
  top: 0;
  left: 0px;
  border: 0px solid rgba(0, 132, 213, 1);
  width: 100%;
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
  z-index: 9;    
}

.border_white {
  position: fixed;
  top: 0;
  left: 0px;
  border: 0px solid rgba(255, 255, 255, 1);
  width: 100%;
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
  z-index: 9;    
}

@media only screen and (max-width: 960px) { .border_white { border: 0px solid rgba(255, 255, 255, 1); } }
@media only screen and (max-width: 564.70588235px) { .border_white { border: 0px solid rgba(255, 255, 255, 1); } }

td.lable {
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.2em;
  padding: 0 20px 0 20px;  
}

@media only screen and (max-width: 960px) { td.lable { font-size: .80em; } }
@media only screen and (max-width: 564.70588235px) { td.lable { font-size: .80em; } }

.logo {
	width: 30%;
    position: fixed;
    z-index: 10; 
    
}

@media only screen and (max-width: 960px) { .logo { width: 55%; vertical-align: top; } }
@media only screen and (max-width: 564.70588235px) { .logo { width: 55%; vertical-align: top; }}


tr.lable {
  text-indent: 1em;
}

.learn {
  font-size: .9em;
  font-weight: 400;
  line-height: 2em;
  color: #0084D5;
}

.copyright {
  font-size: 1em;
  font-weight: 400;
  color: #0084D5; 
  padding: 0px 0px 30px 70px;
  position: fixed;
  z-index: 11;  
  bottom: 0em;
  left: 0;
}

@media only screen and (max-width: 960px) { .copyright { font-size: .85em; } }
@media only screen and (max-width: 564.70588235px) { .copyright { font-size: .85em; }}

.email {
  font-size: 1em;
  font-weight: 400;
  color: #0084D5; 
  padding: 0 70px 30px 0;
  position: fixed;
  z-index: 11;
  bottom: 0em;
  right: 0;
    
}

@media only screen and (max-width: 960px) { .email { font-size: .85em; } }
@media only screen and (max-width: 564.70588235px) { .email { font-size: .85em; }}

a {
  text-decoration: none;
}

.underline {
  font-size: 1em;
  padding-left: 0;
  font-weight: 400;
  color: #0084D5;
  position: relative;
}
@media only screen and (max-width: 960px) { .underline { font-size: .85em; } }
@media only screen and (max-width: 564.70588235px) { .underline { font-size: .85em; } 
}

.underline::before {
  content: '';
  position: absolute;
  bottom: 0px;
  right: 0;
  width: 0;
  height: 1px;
  background-color: #0084D5;
  transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (hover: hover) and (pointer: fine) {
  .underline:hover::before{
    left: 0;
    right: auto;
    width: 100%;
    background-color: #0084D5;
  }
}