@import url(animate.css);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
@import url('https://fonts.googleapis.com/css?family=Bitter|Cabin|Hind|Muli|Oxygen|Poppins');

html,
body {
    overflow-x: hidden;
    height: 100%;
}

@font-face {
    font-family: Code;
    src: url(/fonts/code/CODE\ Bold.otf);
}

@font-face {
    font-family: Gidole;
    src: url(/fonts/Gidole-Regular.ttf);
}

.title {
    font-family: Cabin;
}

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

* {
    font-family: Muli;
    color: #1F121
}

h1,
h2,
h3,
h4,
h5,
p,
span,
a {
    margin: 0;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        border: 1px solid #000;
        border-right: 0;
        border-bottom: 0;
    }
    to {
        -webkit-transform: rotate(360deg);
        border: 0
    }
}

#loading {
    -webkit-border-radius: 100px;
    -webkit-transition: all 1s ease-in;
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 1.0s;
    -webkit-animation-timing-function: linear;
}

.container {
    padding-top: 50px;
    padding-bottom: 50px;
}

nav {
    background: transparent;
    box-shadow: none;
    padding-left: 10%;
    padding-right: 10%;
}

nav a {
    color: #000
}

@media only screen and (max-device-width: 480px) {
    .square {
        margin-left: 20px
    }
}

@keyframes orange {
    from {
        -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
        clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
    }
    to {
        -webkit-clip-path: polygon(0 100%, 100% 90%, 100% 0, 0 0);
        clip-path: polygon(0 100%, 100% 90%, 100% 0, 0 0);
        /* For browsers that do not support gradients */
    }
}

@keyframes yellow {
    from {
        -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
        clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
    }
    to {
        -webkit-clip-path: polygon(0 100%, 100% 80%, 100% 0, 0 0);
        clip-path: polygon(0 100%, 100% 80%, 100% 0, 0 0);
        /* For browsers that do not support gradients */
    }
}

@keyframes green {
    from {
        -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
        clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
    }
    to {
        -webkit-clip-path: polygon(0 100%, 100% 70%, 100% 0, 0 0);
        clip-path: polygon(0 100%, 100% 70%, 100% 0, 0 0);
        /* For browsers that do not support gradients */
    }
}

@keyframes blue {
    from {
        -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
        clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
    }
    to {
        -webkit-clip-path: polygon(0 100%, 100% 60%, 100% 0, 0 0);
        clip-path: polygon(0 100%, 100% 60%, 100% 0, 0 0);
        /* For browsers that do not support gradients */
    }
}

@keyframes white {
    from {
        -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
        clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
    }
    to {
        -webkit-clip-path: polygon(0 100%, 100% 50%, 100% 0, 0 0);
        clip-path: polygon(0 100%, 100% 50%, 100% 0, 0 0);
        /* For browsers that do not support gradients */
    }
}

#w {
    height: 100%;
    animation-name: white;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    background: #F7F7F7; /* For browsers that do not support gradients */
}

#b {
    height: 100%;
    animation-name: blue;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    background: #007AFF; /* For browsers that do not support gradients */
}

#g {
    height: 100%;
    animation-name: green;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    background: green; /* For browsers that do not support gradients */
}

#y {
    height: 100%;
    animation-name: yellow;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    background: yellow; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#FFDB4C, #FFCD02); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#FFDB4C, #FFCD02); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#FFDB4C, #FFCD02); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#FFDB4C, #FFCD02); /* Standard syntax */
}

#o {
    height: 100%;
    animation-name: orange;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    background: orange; /* For browsers that do not support gradients */
    
}

#r {
    background: red; /* For browsers that do not support gradients */
}

ul li a {
    color: #000
}

.pad {
    padding-top: 50px;
}

svg {
  height: 0px;
  width: 0px;
}

@keyframes loader {
  50% {
    transform: translateY(-16px);
    background-color: #1b98e0;
  }
}

.loader {
  filter: url("#goo");
  width: 100px;
  margin: 0 auto;
  position: relative;
  top: 50vh;
  transform: translateY(-10px);
}
.loader > div {
  float: left;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background-color: #006494;
  animation: loader 0.8s infinite;
}

.loader > div:nth-child(1) {
  animation-delay: 0.16s;
}

.loader > div:nth-child(2) {
  animation-delay: 0.32s;
}

.loader > div:nth-child(3) {
  animation-delay: 0.48s;
}

.loader > div:nth-child(4) {
  animation-delay: 0.64s;
}

.loader > div:nth-child(5) {
  animation-delay: 0.8s;
}