@import url(https://fonts.googleapis.com/css?family=Oswald:700);

/* === MEDIA QUERIES === */
/* === MOBILE FIRST === */
body {
	background:#ffaa00;
}

h1, h2, h3, h4, p, a {
	font-family: 'Oswald', sans-serif;
	font-weight:normal;

}


#wrapper {
	background: #ffaa00;
	width:100%;
	margin:0 auto;
	padding:20px;
}

header, nav, section, article, aside {
	margin-bottom:20px;
}

header h1 {
	font-size:52px;
	text-transform:uppercase;
	text-shadow:2px 2px 2px rgba(255,51,51,85);
}


#footer {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    color: #FFF;
    text-transform: uppercase;
    position: fixed;
	text-align:center;
	width:100%;
	bottom:0;
	padding-bottom:15px;
}

/* === TABLET VIEW === */
/*481px to 768px. Inherits styles from: MObile Layout.*/

@media only screen and (min-width:481px) {
	#wrapper {
		width:90%;
	}
	header h1 {
		font-size:72px;
	}
	
	article {
		clear:both;
	}
}

/* === DESKTOP VIEW === */
/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
	
		
	
	#wrapper {
		width:80%;
		max-width:1232px;
	}
	header h1 {
		font-size:102px;
	}

	#footer {
		clear:both;
		text-align:center;
	}
}

/* === VIDEO info === */
video {
	width:100%;
	height:auto;
}

video#bgvid {
	position:fixed;
	right:0;
	bottom:0;
	min-width:100%;
	min-height:100%;
	width:auto;
	height:auto;
	z-index:-100;
	background: url(../images/bgimage.JPG) no-repeat center center fixed;
	background-size:cover;
}

main#intro {
	
	width:40%;
	position:absolute;
	top:50%;
	left:50%;
	text-align:center;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);	
}
	
main#intro h1 {
	font-size:60px;
	color:#F00;
	margin-bottom:10px;
	font-weight:bolder;
}


/* === Animation info === */
.bb, .bb::before, .bb::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.bb {
  width: 200px;
  height: 200px;
  margin: auto;
  background: url(images/AK.svg) no-repeat 50%/70% ;
  padding:3px;
  color: #F00;
  box-shadow: inset 0 0 0 3px #FFF;
}

.bb h2 {
		margin-top:50px;
		text-align:center;
}

.bb a:link {
	color:#f00;

	font-size: 18px;
	text-decoration:none;
}



.bb a:hover {
	color:#fff;	
}

.bb a:visited {
	color:#f00;
}

.bb::before, .bb::after {
  content: '';
  z-index: -1;
  margin: -5%;
  box-shadow: inset 0 0 0 3px;
  animation: clipMe 8s linear infinite;
  -webkit-animation: clipMe 8s linear infinite;
  -moz-animation: clipMe 8s linear infinite;
}
.bb::before {
  animation-delay: -4s;
}


@-webkit-keyframes clipMe {
  0%, 100% {
    clip: rect(0px, 220px, 2px, 0px);
  }
  25% {
    clip: rect(0px, 2px, 220px, 0px);
  }
  50% {
    clip: rect(218px, 220px, 220px, 0px);
  }
  75% {
    clip: rect(0px, 220px, 220px, 218px);
  }
}

@-moz-keyframes clipMe {
  0%, 100% {
    clip: rect(0px, 220px, 2px, 0px);
  }
  25% {
    clip: rect(0px, 2px, 220px, 0px);
  }
  50% {
    clip: rect(218px, 220px, 220px, 0px);
  }
  75% {
    clip: rect(0px, 220px, 220px, 218px);
  }
}

html,
body {
  height: 100%;
}

body {
  position: relative;
}

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