*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
/**  background-image: url(overwatch.png);**/
  background-color: #333333;
/**  color: MediumSeaGreen;**/
/**  height: auto;**/
/**  background-size: cover;
  background-position: center;**/
/** background-size:100% 100% ;**/
/** background-repeat: no-repeat, repeat;**/
  color: #cce6ff;
/**  color: #ccc3a3;**/
  display: grid;
  grid-template-columns:  20% 60% 20% ;
  grid-template-rows: 5% 90% 5%;
  text-shadow: 0 2px 4px rgba(0,0,0,.8),0 8px 16px rgba(0,0,0,.6);
}

#logo{
  height: 15vh;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.characters h2 {
  display: none;
  position: absolute;
  z-index: 2;
  top: 70px;
  left: 0px;
  right: 0px;
  margin: 0;
  padding: 4px;
  border: 1px solid #fff;
  color: #fff;
  background-color: #000;
  font-size: 14px;
  font-weight: normal;
}

.characters img {
  width: 100px;
  height: 100px;
  border: 4px solid #fff;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 20px #000;
  opacity: .25;
  transform: scale(.5);
}
/** for menu bar botton on active 
color: #fff;
box-shadow: 0 2px #66b3ff;
background-image: linear-gradient(0deg,rgba(0,128,255,.4),rgba(0,128,255,.1));
**/

h1{
  text-transform: uppercase;
  text-align: center
  letter-spacing: .05em;
  margin: 2rem;
}

h2{
  text-transform: uppercase;
  text-align: left;
  letter-spacing: .05em;
  margin:1rem;
}

h3{
  text-transform: uppercase;
  text-align: left;
  margin-bottom:1rem;
  letter-spacing: .05em;
}

hr{
color:#204f7e;
margin-top:1rem; 
margin-bottom:1rem; 
}
header{
 grid-column: 1  / span 3; 
 grid-row: 1;
 /**grid-row-align: center; **/
 text-align: center;
}
main{
  grid-column: 2 / span 1; 
  grid-row: 2;
  min-height: 100%;
}
footer{
  grid-column: 2 /** span 2 **/; 
  grid-row: 3;
  text-align: center;
}
aside{

}

.aside-content{
  width:100%;
/**  height:100%;**/
}
.margin-top-auto {
    margin-top: auto;
}

.left{
 grid-column: 1 ; 
 grid-row: 2 / span 2;
}
.right{
  grid-column: 3 ; 
  grid-row: 2 / span 2;
}
.scroll{
  width: auto;
  height: 15%;
/**  background-color: red;**/
  background-color: #8257a3;
  position: relative;
  animation-name: down;
  animation-duration: 10s;
  animation-iteration-count: infinite;
/*  animation-direction: alternate;*/
   animation-timing-function: linear;
}

@keyframes down {
    from {bottom: 0%;}
    to {top: 85%;}
}
 /* unvisited link */
a:link {
   color: #cce6ff;
   text-decoration: none;
}

/* visited link */
a:visited {
    color: green;
    text-decoration: none;
}

/* mouse over link */
a:hover {
color: #204F7E;
/**color: #fff;**/
filter: brightness(1.3);
text-decoration: none;
}

/* selected link */
a:active {
    color: blue;
    text-decoration: none;
}
.test{
/*border-width: 20%;*/
/*text-align: center;*/
margin-top: 15px;
/**border-color: hotpink;**/
border-color: #204f7e;
border-style: solid;
border-left-width: 9px;
border-top-width: 3px;
border-bottom-width: 3px;
border-right-width: 9px;
}
.ano{
/*animation: mymove 5s infinite;*/
/*    width: 100px;
    height: 100px;
    background-color: red;*/
    position: relative;
    -webkit-animation-name: mymove; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: title;
    animation-duration: 60s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes title {
    from {left: 0%;}
    to {left: 80%;}
}

.width{
  width:200px;
}
/* Blinkthe black  */
.blink {
  animation: blink-animation 9s steps(5, start) infinite;
  -webkit-animation: blink-animation 9s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

/*blink me */
.blink_me {
  animation: blinker 9s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.btn, .btn-default {
    width: 25px;
}
.btn, .btn-default {
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0,0,0,.6),0 8px 32px rgba(0,0,0,.4);
/**    margin-bottom: 1.87137rem;**/
/**    margin-top: 1.87137rem;**/
    text-shadow: 0 1px 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.6);
    background-color: transparent;
    background-image: linear-gradient(180deg,rgba(0,0,0,.9),rgba(4,49,95,.9));
    background-origin: border-box;
/**    color: #9cf;**/
    color: #cce6ff;
    display: block;
    font-family: Eurostile Extd,Source Sans Pro,sans-serif;
    font-size: .731rem;
    line-height: 1;
    overflow: visible;
 /**   padding: .625rem 1.6rem;**/
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: color .2s,filter .2s,opacity .2s,transform .2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
}
::after, ::before {
    box-sizing: border-box;
}
.btn::after {
    border-style: solid;
    border-width: 17px 60px;
    -o-border-image: url(./buttton-border-default.png) 17 60 repeat;
    border-image: url(./button-border-default.png) 17 60 repeat;
 /**   border-image-outset: 0;**/
    border-image-outset: 14px;
    content: "";
    bottom: 0;
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}
.cards{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

article{
  flex: 1 0 25%;
  margin: auto;
  background-image: linear-gradient(180deg,rgba(0,51,102,0) 50%,rgba(39, 49, 59, 0.2));
  box-shadow: 0 2px 8px rgba(0,0,0,.6),0 8px 32px rgba(0,0,0,.4);
  margin: 0.5rem;
  border-style: solid;
  /**border-color:#fff;**/
  border-color: #204F7E;
}
article:hover {
    color: #cce6ff;
    box-shadow: 0 2px #3d6b99;
    background-image: linear-gradient(0deg,rgba(24, 68, 111, 0.85),rgba(255, 255, 255, 0.05));
   /** background-image: linear-gradient(0deg,rgba(113, 184, 255, 0.5),rgba(255, 171, 0, 0.05));**/
}



.text{
  padding: 1.4rem ;
}

header img{
max-width: 100%;
}
/** glitch on text**/
.glitch{
/*  color:white;
  font-size:100px;
  position:relative;
  width:400px;
  margin:0 auto;**/
}
@keyframes noise-anim{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}
.glitch:after{
  content:attr(data-text);
  position:absolute;
  left:2px;
  text-shadow:-1px 0 red;
  top:0;
  color:white;
  background:black;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim 2s infinite linear alternate-reverse;
}
@keyframes noise-anim-2{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}
.glitch:before{
  content:attr(data-text);
  position:absolute;
  left:-2px;
  text-shadow:1px 0 blue; 
  top:0;
  color:white;
  background:black;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim-2 3s infinite linear alternate-reverse;
}
nav{
border-style: solid;
border-color: #204f7e;
align-items: center;
margin:auto;
text-shadow: 0 1px 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.6);
text-transform: uppercase;
/**display: flex;
-ms-flex-align: stretch;
align-items: stretch;
align-self: center;**/
text-align: center
}
.button{
margin-top: auto;

font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
box-shadow: 0 2px 8px rgba(0,0,0,.6),0 8px 32px rgba(0,0,0,.4);
margin-bottom: 1.87137rem;
margin-top: 1.87137rem;
text-shadow: 0 1px 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.6);
background-color: transparent;
background-image: linear-gradient(180deg,rgba(17, 16, 14, 0.9),rgba(4, 49, 95, 0.9));
background-origin: border-box;
color: #9cf;
display: block;
font-family: Eurostile Extd,Source Sans Pro,sans-serif;
/**font-size: .731rem;
line-height: 1;**/
overflow: visible;
padding: .625rem 1.6rem;
    padding-bottom: 0.625rem;
position: relative;
text-align: center;
text-decoration: none;
transition: color .2s,filter .2s,opacity .2s,transform .2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 100%;

}
.button::after{
  border-style: solid;
  border-width: 17px 60px;
  -o-border-image: url(button-border-default.png) 17 60 repeat;
  border-image: url(button-border-default.png) 17 60 repeat;
  border-image-outset: 14px;
  content: "";
  bottom: 0;
  display: block;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}