.Banner{
	
	width: 100%;
	height: 300px;
	background-color: rgba(10, 10, 10, 0.5);
	background-image: url("../Images/BannerLogo.png");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: auto;
	background-position: 10px 50px;
	
	border-radius: 5%;
	text-align: center;
	margin-bottom: 10px;
	padding-top: 7%;

	font-size: 65px;
	color: white;
	font-weight: bold;
	text-shadow: 2px 2px blue;
}

a, a:hover, a:focus, a:active {
      text-decoration: none;
	color: inherit;
 }
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
html {
  font-size: 62.5%;
}
 
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  min-height: 100vh;
  padding: 2rem;
  color: hsla(0, 0%, 0%, .6);
  background: #e8eaed;
  text-align: center;
}
h1 {
  font-size: 3.2rem;
  padding-top: 2rem;
}
h1+p {
  font-size: 14px;
  padding: 2rem 0 3rem;
}
.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.wrap {
  margin: 2rem;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: perspective(100rem);
          transform: perspective(100rem);
  cursor: pointer;
}
.container {
  --rX: 0;
  --rY: 0;
  --bX: 50%;
  --bY: 80%;
  width: 400px;
  height: 400px;;
  border: 1px solid #e8eaed;
  border-radius: 1.6rem;
  padding: 4rem;
  display: flex;
  align-items: flex-end;
  position: relative;
  -webkit-transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));
          transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));
  background: linear-gradient(hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)), url("../Images/uswlogo2.png");
background-position: center;
  /*background-position: var(--bX) var(--bY);*/
  background-size: auto auto;
background-repeat: no-repeat;
  box-shadow: 0 0 3rem .5rem hsla(0, 0%, 0%, .2);
  transition: -webkit-transform .6s 1s;
  transition: transform .6s 1s;
  transition: transform .6s 1s, -webkit-transform .6s 1s;
}
.container::before,
.container::after {
  content: "";
  width: 300px;
  height: 400px;
  border: 1px solid gray;
  position: absolute;
  z-index: 2;
  opacity: .3;
  transition: .3s;
}
.container::before {
  top: 2rem;
  right: 2rem;
  border-bottom-width: 0;
  border-left-width: 0;
}
.container::after {
  bottom: 2rem;
  left: 2rem;
  border-top-width: 0;
  border-right-width: 0;
}
.container--active {
  transition: none;
}
.image2 {
  -webkit-filter: hue-rotate(80deg) saturate(140%);
          filter: hue-rotate(80deg) saturate(140%);
}
.container p {
  color: hsla(0, 0%, 100%, .6);
  font-size: 14px;
}
.wrap:hover .container::before,
.wrap:hover .container::after {
  width: calc(100% - 4rem);
  height: calc(100% - 4rem);
}