body,
html {
    margin: 0;
    padding: 0;
}
.animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
	overflow: hidden;
}

 .round, .fulllogo, .fulllogo img, .logoletter, .logoletter .new {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.round {
	width: 20vw;
	height: 20vw;
	animation: endhide 0.01s ease 4s normal forwards;
}

.blackround {
	background: black;
	background-image: url(CFBO.svg);
	background-size: cover;
	border-radius: 50%;
	width: 20vw;
	height: 20vw;
    
    overflow: hidden;
	animation: stretch 1.9s ease-in-out 1.3s 1 normal forwards, endhide 0.01s ease 2s normal forwards;
}

.bluesquare {
   	width: 100%;
	height: 100%;
    background: #0000FF;
    position: relative;
	animation: colorchange 0.6s ease-in 0.5s normal forwards, endfadeout 0.6s ease 4s normal forwards;
	visibility: hidden;
}
.fulllogo {
    overflow: hidden;
	width: 100%;
	height: 50%;
	animation: endhide 0.01s ease 4s normal forwards;
}
.fulllogo img {
	width: 30%;
	height: 50%;
    visibility: hidden;
	animation: img 2s ease 1.3s normal forwards, endhide 0.01s ease 4s normal forwards;
}

.bluecurtain {
    width: 28%;
	height: 20%;
    background: #0000FF;
    position: relative;
   	top: 40%;
	left: 0%;
	animation: curtain 1.5s ease-out 1.6s normal forwards, endhide 0.01s ease 4s normal forwards;
	
    visibility: hidden;
}
.banner-title {
	animation: bannertextappearfrombelow 1.015s ease-in-out 3.4s normal forwards;
}

@keyframes colorchange { /*Blue square covers black round*/
    0% {
        visibility: visible;
		top: 100%;
		left: 0px;
    }
    100% {
        visibility: visible;
		left: 0px;
		top: 0;  
    } 
}
@keyframes bannertextappearfrombelow {
    0% {
        margin-top:60%;
    }
    100% {
        margin-top:0;
    } 
}

@keyframes endhide { 
  0% {
    visibility: visible;
  }
  100% {
    visibility: hidden;
  }
}
@keyframes endfadeout { 
  0% {
	opacity:1;
    visibility: visible;
  }
 99% {
    opacity: 0;
	visibility: visible;
  }	
  100% {
	opacity:0;
    visibility: hidden;
  }
}
@keyframes stretch { /*Blue round stretches*/
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(20);
  }
}

@keyframes curtain { /*Full logo text opens up*/
    1% {
        visibility: hidden;
        left: 30%;
    }
    2% {
        visibility: visible;
		left: 35%;
    }
    100% {
        left: 105%;
        visibility: visible;
    } 
}

@keyframes img {
    19% {
        visibility: hidden;
    }
    27% {
        visibility: visible;
    }
    100% {
        visibility: visible;
    }
}

.logoletter {
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

.logoletter img { /*Logo "G" letter*/
   	width: 3.01%;
    visibility: hidden;
    position: absolute;
	left: 36.5%;
	top: 50%;
	margin-top: -0.2vw;	
	animation: spin 1.5s ease-in-out 2.9s normal forwards;
}

@keyframes spin { /*Letter "G" spins*/
    0% {
		visibility: hidden;
		transform: translateX(-50%) translateY(-50%) rotate(-135deg);
        left: 36.5%;
    }
   	50% { 
		visibility: visible;
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
		left: 50%;
    }
    65% {
        visibility: visible;
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
		width: 3%;
        top: 50%;
    }
    100% {
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
        visibility: visible;
        left: 50%;
		width: 130px;
        top: 25%;
    }
}

.blueright {
    width: 55%;
	height: 20%;
    background: #0000FF;
    position: relative;
    top: 40%;
    left: -100%;
	animation: totheright 1.6s ease-out 2.25s normal forwards, endhide 0.01s ease 4s normal forwards;
    visibility: hidden;
}

@keyframes totheright { /*Blue square cover full logo text*/
    0% {
        visibility: hidden;
        left: -100%;
    }
    11% {
        visibility: visible;
        left: -70%;
    }
    100% {
        left: 25%;
        visibility: visible;
    } 
}

.logoletter .new {
    position: absolute;

}

.logoletter .new .new1{
	animation: textup 0.4s ease-in 4.1s normal forwards;
	
    opacity: 0;
}

@keyframes textup { /*Text goes up*/
   0% {
       top: 60%;
       opacity: 0.1;
    }
	100% {
       top: 45%;
       opacity: 1;
    }
}

@media screen and (max-width: 1367px) {
	
@keyframes spin { /*Letter "G" spins*/
    0% {
		visibility: hidden;
		transform: translateX(-50%) translateY(-50%) rotate(-135deg);
        left: 36.5%;
    }
   	50% { 
		visibility: visible;
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
		left: 50%;
    }
    65% {
        visibility: visible;
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
		width: 3%;
        top: 50%;
    }
    100% {
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
        visibility: visible;
        left: 50%;
		width: 100px;
        top: 25%;
    }
}	
	
}
	
	
@media screen and (max-width: 880px) {
	
.animation {
	height: 100vh; 
	height: calc(var(--vh, 1vh) * 100);
}
	
}	
	
@media screen and (max-width: 800px) {
	
.round {
	width: 50vw;
	height: 50vw;
}
	
.blackround {
	width: 50vw;
	height: 50vw;
}
	
.fulllogo {
	width: 100%;
}

.fulllogo img {
    width: 60%;
}
	
.bluecurtain {
    width: 40%;
    animation-duration: 1s;
}	
	
.logoletter {
	width: 100%;
	height: 80%;
}
	
.logoletter img {
    width: 6%;
	left: 23%;
	top: 50%;
	margin-top: -0.45vw;
}
	
@keyframes spin {
    0% {
		visibility: hidden;
		transform: translateX(-50%) translateY(-50%) rotate(-135deg);
        left: 23%;
    }
	100% { /*1%*/
		visibility: visible;
		transform: translateX(-50%) translateY(-50%) rotate(-134deg);
        left: 23%;
    }
   	50% { 
		visibility: visible;
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
		left: 50%;
    }
    65% {
        visibility: visible;
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
		width: 6%;
        top: 50%;
    }
    100% {
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
        visibility: visible;
        left: 50%;
		width: 15%;
        top: 25%;
    }
}
	
.blueright {
    width: 90%;

	animation: totheright 0.9s ease-out 2.9s normal forwards, endhide 0.01s ease 4s normal forwards;
}
	
@keyframes totheright {
    100% {
        left: 15%;
        visibility: visible;
    } 
}
	
 /*.logoletter p {
    font-size: 1.5rem;
} */
	
@keyframes textup {
   0% {
       top: 55%;
       opacity: 0.1;
	}
	100% {
       top: 45%;
		opacity: 1;
    }
}
	
}

@media screen and (max-width: 760px) {
	
@keyframes spin {
    0% {
		visibility: hidden;
		transform: translateX(-50%) translateY(-50%) rotate(-135deg);
        left: 23%;
    }
	100% { /*1%*/
		visibility: visible;
		transform: translateX(-50%) translateY(-50%) rotate(-134deg);
        left: 23%;
    }
   	50% { 
		visibility: visible;
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
		left: 50%;
    }
    65% {
        visibility: visible;
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
		width: 6%;
        top: 50%;
    }
    100% {
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
        visibility: visible;
        left: 50%;
		width: 15%;
        top: 105px;
		width: 80px;
    }
}	
	
}