.nav-logo{
    letter-spacing: 0px;
    margin-top:8px;
}

.content {
  align-items: center;
  display: flex;
  height: 110vh;
  justify-content: center;
  margin: 0;
  width: 100vw;
}

.about{
  max-width: 900px; padding-left: 20px !important ; padding-right:20px !important ;
}

.loop-container{
    display: inline;
    margin: 0 15px;
}

.navbar .loop-container{
    margin:0 5px 0;
}
.centered .loop-container{
  font-size: 3.8vw;
}

.centered div, .nav-logo div{
    display: inline;
    position: relative;

}


.about-img{
  max-width: 800px;
}


.loop-box{
cursor:none;
}

.logoAnimate1,.logoAnimate2,.logoAnimate3,.logoAnimate4,.logoAnimate5,.logoAnimate6{
    top: 0;
}

.loop-box .logoAnimate1,
.loop-box .logoAnimate2,
.loop-box .logoAnimate3,
.loop-box .logoAnimate4,
.loop-box .logoAnimate5,
.loop-box .logoAnimate6,
.loop-box .logoAnimate7,
.loop-box .logoAnimate8 {
  transition: top .8s ease-in-out;
}

.loop-box:hover .logoAnimate1 {
  animation: MoveUp1 5.5s ease-in-out infinite;
  -webkit-transition: all 5.5s ease-in-out;
  -moz-transition: all 5.5s ease-in-out;
  -o-transition: all 5.5s ease-in-out;
  transition: all 5.5s ease-in-out;
}

@keyframes MoveUp1 {
  0%, 100% {
    top: 0;
  }
  50% {
    top: -120px;
  }
}

.navbar .logoAnimate1, .navbar .logoAnimate2{
    -webkit-transition: all .5s ease-in-out;
      -moz-transition: all .5s ease-in-out;
      -o-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
  }

nav .nav-logo:hover .logoAnimate1{
  top:-8px;
}

.loop-box:hover .logoAnimate2 {
  animation: MoveUp2 3s ease-in-out infinite;
  -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
}

@keyframes MoveUp2 {
  0%, 100% {
    top: 0;
  }
  50% {
    top: 50px;
  }
}

nav .nav-logo:hover .logoAnimate2{
  top:10px;
}


.loop-box:hover .logoAnimate3 {
  animation: MoveUp3 3.5s ease-in-out infinite;
  -webkit-transition: all 3.5s ease-in-out;
    -moz-transition: all 3.5s ease-in-out;
    -o-transition: all 3.5s ease-in-out;
    transition: all 3.5s ease-in-out;
}

@keyframes MoveUp3 {
  0%, 100% {
    top: 0;
  }
  50% {
    top: -70px;
  }
}

.navbar .logoAnimate3, .navbar .logoAnimate4{
    -webkit-transition: all .4s ease-in-out;
      -moz-transition: all .4s ease-in-out;
      -o-transition: all .4 ease-in-out;
      transition: all .4s ease-in-out;
  }

nav .nav-logo:hover .logoAnimate3{
  top:-5px;
}


.loop-box:hover .logoAnimate4 {
  animation: MoveUp4 4.5s ease-in-out infinite;
  -webkit-transition: all 4.5s ease-in-out;
    -moz-transition: all 4.5s ease-in-out;
    -o-transition: all 4.5s ease-in-out;
    transition: all 4.5s ease-in-out;
}

@keyframes MoveUp4 {
  0%, 100% {
    top: 0;
  }
  50% {
    top: 150px;
  }
}


.loop-box:hover .logoAnimate5 {
  animation: MoveUp5 2.75s ease-in-out infinite;
  -webkit-transition: all 2.75s ease-in-out;
    -moz-transition: all 2.75s ease-in-out;
    -o-transition: all 2.75s ease-in-out;
    transition: all 2.75s ease-in-out;
}

@keyframes MoveUp5 {
  0%, 100% {
    top: 0;
  }
  50% {
    top: 50px;
  }
}

.loop-box:hover .logoAnimate6 {
  animation: MoveUp6 4.8s ease-in-out infinite;
  -webkit-transition: all 4.8s ease-in-out;
    -moz-transition: all 4.58s ease-in-out;
    -o-transition: all 4.8s ease-in-out;
    transition: all 4.8s ease-in-out;
}

@keyframes MoveUp6 {
  0%, 100% {
    top: 0;
  }
  50% {
    top: 150px;
  }
}


nav .nav-logo:hover .logoAnimate4{
  top:5px;
}

.loop-box:hover .logoAnimate7{
  animation: MoveUp7 3s ease-in-out infinite;
  -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
}

@keyframes MoveUp7 {
  0%, 100% {
    top: 0;
  }
  50% {
    top: 70px;
  }
}


.loop-box:hover .logoAnimate8{
  animation: MoveUp8 3s ease-in-out infinite;
  -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
}

@keyframes MoveUp8 {
  0%, 100% {
    top: 0;
  }
  50% {
    top: 80px;
  }
}

.red{
  background-color: red;
}

.green{
 background-color: lawngreen;
}

.blue{
  background-color: blue;
}

.yellow{
background-color: yellow;
}

.teal{
  background-color: teal;
}



.one, .two, .three{
  font-size: 30px;
  font-weight: bold;
  height: 200px;
  line-height: 200px;
  margin: 1em;
  text-align: center;
  width: 300px;
}

.one {
  background-color: #EC368D;
}

.two {
  background-color: #333;
}

.three {
  background-color: #440381;
}

/** NEW AND FINAL CSS **/

/** INDEX **/
.centered {
    position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
/**== GLOBAL ==**/

html, body {
  padding: 0;
	margin: 0;
	xfont-family: 'nimbus-sans', sans-serif;
	xfont-weight: 400;
	xfont-style: normal;
	font-stretch: normal;
	height:100%;
	color:#262626;
  xoverflow: hidden;


  font-family: soleil, sans-serif;
  
  font-weight: 400;
  
  font-style: normal;
    letter-spacing: 1px;
}

.container-fluid{
  padding: 0;
}

::scrollbar {
  display: none;
}

::-webkit-scrollbar {
width: 0px;
}

/**== LINKS ==**/

a{
  color: rgba(0, 0,0, 1);
}

a:hover{
  color: rgba(0, 0,0, 0.3);
  text-decoration: none;
}


/**== NAV BAR ==**/

.nav-logo{
    margin: 8px 15px;
}

li{
    margin: 0 8px;
}
/**== PORTFOLIO ==**/
main {
  height: 100%;
  overflow: auto;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
}

.js-loop .row{
  height: 100vh;
}

.t150{
  margin-top: 150px;
}
.t300{
  margin-top: 300px;
}

/**== CAPTIONS ==**/
small{
  display: block;
}

.hover-content {
  font-size: 1.2em;
  padding-top: 3px;
    visibility:hidden;
    text-transform: uppercase;
}
.rellax:hover .hover-content {
    visibility:visible;
}

@media only screen and (max-width: 875px) {
  .t150{
    margin-top: 0px;
  }
  .t300{
    margin-top: 0px;
  }

.row {
  flex-wrap: nowrap;
}

  .hover-content {
    font-size: 1.2em;
    padding-top: 10px;
    padding-left: 20px;
    visibility:visible
  }

      .centered .loop-container {
        font-size: 5vw;
    }

}