/* Slideshow container */
.slideshow-container {
/*   max-width: 1000px; 
  background: #000000; */
  position: relative;
  width: 100%;
  margin: 0px;
  padding: 5px 5px 0px 5px;
  text-align: center;


	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}



.flipper{
    display: none;
}

.current-flipper.flipper{
    display: block;
}

.flip-container {
      width: 300px;
      height: 250px;
      position: relative;
      display: inline-block;
      margin: 0px;
      /* margin: 0 auto 40px; */
      /* border: 1px solid #CCC; */
      -webkit-perspective: 800px;
         -moz-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
    }

    #card {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transition: -webkit-transform 1.5s;
         -moz-transition: -moz-transform 1.5s;
           -o-transition: -o-transform 1.5s;
              transition: transform 1.5s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }

    #card.flipped {
      -webkit-transform: rotateX( 360deg );
         -moz-transform: rotateX( 360deg );
           -o-transform: rotateX( 360deg );
              transform: rotateX( 360deg );
    }

    #card .flipper {
      height: 100%;
      width: 100%;
      line-height: 260px;
      color: white;
      text-align: center;
      font-weight: bold;
      font-size: 140px;
      position: absolute;
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }
.flipper{ background:#FFFFFF}



.flipper2{
    display: none;
}

.current-flipper.flipper2{
    display: block;
}

.flip-container2 {
      width: 2100px;
      height: 900px;
      position: relative;
      display: inline-block;
      margin: 0px;
      /* margin: 0 auto 40px; */
      /* border: 1px solid #CCC; */
      -webkit-perspective: 800px;
         -moz-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
    }

    #card2 {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transition: -webkit-transform 1.5s;
         -moz-transition: -moz-transform 1.5s;
           -o-transition: -o-transform 1.5s;
              transition: transform 1.5s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }

    #card2.flipped {
      -webkit-transform: rotateY( 360deg );
         -moz-transform: rotateY( 360deg );
           -o-transform: rotateY( 360deg );
              transform: rotateY( 360deg );
    }

    #card2 .flipper2 {
      height: 100%;
      width: 100%;
      line-height: 260px;
      color: white;
      text-align: center;
      font-weight: bold;
      font-size: 140px;
      position: absolute;
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }
.flipper2{ background:#FFFFFF}



.flipper3{
    display: none;
}

.current-flipper.flipper3{
    display: block;
}
.flip-container3 {
      width: 300px;
      height: 250px;
      position: relative;
      display: inline-block;
      margin: 0px;
      /* margin: 0 auto 40px; */
      /* border: 1px solid #CCC; */
      -webkit-perspective: 800px;
         -moz-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
    }

    #card3 {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transition: -webkit-transform 1.5s;
         -moz-transition: -moz-transform 1.5s;
           -o-transition: -o-transform 1.5s;
              transition: transform 1.5s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }

    #card3.flipped {
      -webkit-transform: rotateX( -360deg );
         -moz-transform: rotateX( -360deg );
           -o-transform: rotateX( -360deg );
              transform: rotateX( -360deg );
    }

    #card3 .flipper3 {
      height: 100%;
      width: 100%;
      line-height: 260px;
      color: white;
      text-align: center;
      font-weight: bold;
      font-size: 140px;
      position: absolute;
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }
.flipper3{ background:#FFFFFF}


.flipper4{
    display: none;
}

.current-flipper.flipper4{
    display: block;
}
.flip-container4 {
      width: 300px;
      height: 250px;
      position: relative;
      display: inline-block;
      margin: 0px;
      /* margin: 0 auto 40px; */
      /* border: 1px solid #CCC; */
      -webkit-perspective: 800px;
         -moz-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
    }

    #card4 {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transition: -webkit-transform 1.5s;
         -moz-transition: -moz-transform 1.5s;
           -o-transition: -o-transform 1.5s;
              transition: transform 1.5s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }

    #card4.flipped {
      -webkit-transform: rotateY( -360deg );
         -moz-transform: rotateY( -360deg );
           -o-transform: rotateY( -360deg );
              transform: rotateY( -360deg );
    }

    #card4 .flipper4 {
      height: 100%;
      width: 100%;
      line-height: 260px;
      color: white;
      text-align: center;
      font-weight: bold;
      font-size: 140px;
      position: absolute;
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }
.flipper4{ background:#FFFFFF}


.flipper5{
    display: none;
}

.current-flipper.flipper5{
    display: block;
}
.flip-container5 {
      width: 300px;
      height: 250px;
      position: relative;
      display: inline-block;
      margin: 0px;
      /* margin: 0 auto 40px; */
      /* border: 1px solid #CCC; */
      -webkit-perspective: 800px;
         -moz-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
    }

    #card5 {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transition: -webkit-transform 1.5s;
         -moz-transition: -moz-transform 1.5s;
           -o-transition: -o-transform 1.5s;
              transition: transform 1.5s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }

    #card5.flipped {
      -webkit-transform: rotateX( 360deg );
         -moz-transform: rotateX( 360deg );
           -o-transform: rotateX( 360deg );
              transform: rotateX( 360deg );
    }

    #card5 .flipper5 {
      height: 100%;
      width: 100%;
      line-height: 260px;
      color: white;
      text-align: center;
      font-weight: bold;
      font-size: 140px;
      position: absolute;
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }
.flipper5{ background:#FFFFFF}


.flipper6{
    display: none;
}

.current-flipper.flipper6{
    display: block;
}
.flip-container6 {
      width: 300px;
      height: 250px;
      position: relative;
      display: inline-block;
      margin: 0px;
      /* margin: 0 auto 40px; */
      /* border: 1px solid #CCC; */
      -webkit-perspective: 800px;
         -moz-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
    }

    #card6 {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transition: -webkit-transform 1.5s;
         -moz-transition: -moz-transform 1.5s;
           -o-transition: -o-transform 1.5s;
              transition: transform 1.5s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }

    #card6.flipped {
      -webkit-transform: rotateY( 360deg );
         -moz-transform: rotateY( 360deg );
           -o-transform: rotateY( 360deg );
              transform: rotateY( 360deg );
    }

    #card6 .flipper6 {
      height: 100%;
      width: 100%;
      line-height: 260px;
      color: white;
      text-align: center;
      font-weight: bold;
      font-size: 140px;
      position: absolute;
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }
.flipper6{ background:#FFFFFF}



#box1{
    background:white;
}
#home{
    background:red;
}
#about{
    background:blue;
}
#work{
    background:green;
}
#contact{
    background: yellow;
}