* {
	box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

.content {
    margin: 0 auto;
    width: 100%;
    max-width: 960px;
    padding: 0 15px;
}

h1 {
    margin: 60px 0;
    padding: 0;
    font-size: 50px;
    text-align: center;
}

p {
    margin: 0 0 30px 0;
    font-size: 30px;
    line-height: 1.5;
}

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-aspect-ratio: 16/9) {
    .fullscreen-bg__video {
        height: 300%;
        top: -100%;
    }
}

@media (max-aspect-ratio: 16/9) {
    .fullscreen-bg__video {
        width: 300%;
        left: -100%;
    }
    
}

@media (max-width: 767px) {
     .fullscreen-bg__video {
        width: 300%;
        left: -100%;
    }
    #Logo{
        left: 50%;
    }
}

#Logo {
position: absolute;
display: block;
width: 110px;
height: 110px;
left: 90%;
top: 80%;
cursor: pointer;
overflow: hidden;
/* z-index: 1; */
z-index: 2;
   /* top: 50px; */
opacity: 1;
}

.XyzLogoAdjust {
padding-left: 9px;
padding-top: 9px;
}



.LogoAnimation {
position: absolute;
top: -22px;
bottom: 0;
left: 0;
right: 0;
}

.LogoAnimation::before, .LogoAnimation::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.LogoAnimation {
width: 80px;
height: 80px;
margin: auto;
background: rgba(0,0,0, .6);
/* background: url('../img/city-logo.png') no-repeat 50%/70% rgba(0,0,0, .2); */
color: #fff;
/*
-webkit-box-shadow: inset 0 0 0 1px rgba(225,225,225, .5);
   -moz-box-shadow: inset 0 0 0 1px rgba(225,225,225, .5);
	    box-shadow: inset 0 0 0 1px rgba(225,225,225, .5);
*/
}

.LogoAnimation::before, .LogoAnimation::after {
content: '';
margin: -5%;
color: #F5C503;
-webkit-box-shadow: inset 0 0 0 1px;
   -moz-box-shadow: inset 0 0 0 1px;
	    box-shadow: inset 0 0 0 1px;
-webkit-animation: clipMe 8s linear infinite;
        animation: clipMe 8s linear infinite;
z-index: -1;
}

.LogoAnimation::before {
-webkit-animation-delay: -4s;
        animation-delay: -4s;
}

.LogoAnimation:hover::after, .LogoAnimation:hover::before {
}

@keyframes clipMe {
  0%, 100% {
    clip: rect(0px, 88px, 2px, 0px);
  }
  25% {
    clip: rect(0px, 2px, 88px, 0px);
  }
  50% {
    clip: rect(86px, 88px, 88px, 0px);
  }
  75% {
    clip: rect(0px, 88px, 88px, 86px);
  }
}