<div class="logo">
  <p class="letter">C</p>
  <div class="border"></div>
  <div class="slides">
    <div class="slide slide1"></div>
    <div class="slide slide2"></div>
    <div class="slide slide3"></div>
    <div class="slide slide4"></div>
    <div class="slide slide5"></div>
  </div>
</div>

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

html {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  width: 100%;
  height: 100%;
  background: #aaa;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  padding-top: 50px;
}

.logo {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  width: 400px;
  height: 400px;
  color: #333;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.border {
  position: relative;
  z-index: 1000;
  width: 100%;
  height: 100%;
  border: 15px solid #fff;
  opacity: 0;
  -webkit-animation: b1 .5s 1.9s forwards;
  animation: b1 .5s 1.9s forwards;
}

@-webkit-keyframes b1 {
  to { opacity: 0.55; }
}

@keyframes b1 {
  to { opacity: 0.55; }
}

p.letter {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1001;
  font-size: 22em;
  font-weight: 400;
  text-align: center;
  line-height: 0;
  padding-top: 200px;
  color: #fff;
  opacity: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: l1 .5s 1.9s forwards;
  animation: l1 .5s 1.9s forwards;
}

@-webkit-keyframes l1 {
  to { opacity: 1; }
}

@keyframes l1 {
  to { opacity: 1; }
}

.slides {
  position: absolute;
  top: -83px;
  left: -82px;
  width: 566px;
  height: 566px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Safari */
  transform: rotate(45deg);
}

.slide {
  position: relative;
  float: left;
  width: 20%;
  height: 0;
}

.slide1 {
  background-color: #003134;
  -webkit-animation: s1 .7s .8s forwards;
  animation: s1 .7s .8s forwards;
}

@-webkit-keyframes s1 {
  to { height: 100%; }
}

@keyframes s1 {
  to { height: 100%; }
}

.slide2 {
  background-color: #005872;
  -webkit-animation: s2 .7s 1s forwards;
  animation: s2 .7s 1s forwards;
}

@-webkit-keyframes s2 {
  to { height: 100%; }
}

@keyframes s2 {
  to { height: 100%; }
}

.slide3 {
  background-color: #4d9aa9;
  -webkit-animation: s3 .7s 1.2s forwards;
  animation: s3 .7s 1.2s forwards;
}

@-webkit-keyframes s3 {
  to { height: 100%; }
}

@keyframes s3 {
  to { height: 100%; }
}

.slide4 {
  background-color: #0e7286;
  -webkit-animation: s4 .7s 1.4s forwards;
  animation: s4 .7s 1.4s forwards;
}

@-webkit-keyframes s4 {
  to { height: 100%; }
}

@keyframes s4 {
  to { height: 100%; }
}

.slide5 {
  background-color: #002029;
  -webkit-animation: s5 .7s 1.6s forwards;
  animation: s5 .7s 1.6s forwards;
}

@-webkit-keyframes s5 {
  to { height: 100%; }
}

@keyframes s5 {
  to { height: 100%; }
}