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

body {
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  padding: 20px;
  color: white;
}
.nav h1 {
  font-weight: 300;
  font-size: 3rem;
}
.nav .author {
  text-align: right;
}

.loading {
 /* background-color: rgba(46,204,113,0);*/
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 600px;
  line-height: 600px;
  text-align: center;
  color: white;
  font-size: 2rem;
}

.slider {
  position: relative;
  width: 80%;
  height: 500px;
  display: none;
  margin:auto;
}

.slider-inner {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  /*-webkit-transition-timing-function: cubic-bezier(0.22, .30, 0.65, 1);
          transition-timing-function: cubic-bezier(0.22, .30, 0.65, 1);
  -webkit-transition-duration: .01s;  the third part of the animation 
          transition-duration: .01s;*/
  background-visibility: hidden;
  -webkit-transition-delay: 10s; /* the second part of the animation. When all three times are the same, there is no glitch in the animation */
          transition-delay: 10s;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

.slide {
	  position: absolute;
	  top: 0;
	  height: 100%;
	  background-visibility: hidden;
	  -webkit-transition-timing-function: easeInOut; /*@@ last number makes scale shrink and maybe flip */
			  transition-timing-function: easeInOut;
	  -webkit-transform: translateZ(0) scale(0.8, 0.5); /* @@ Width and Height scale at end of transition */
			  transform: translateZ(0) scale(0.8, 0.5);
	  -webkit-transition-duration: 10s;/*@@ the first part of the animation*/
			  transition-duration: 10s;
	  text-align: center;
}
.slide.active {
	  -webkit-transform: scale(1, 1);
			  transform: scale(1, 1);
	  -webkit-transition-delay: 10s;
			  transition-delay: 10s;
}
.slide:nth-child(2n) {
		
}
.slide:nth-child(3n) {
  
}
.slide:nth-child(4n) {
 
}

.slider-nav {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  padding: 20px;
  text-align: center;
}
.slider-nav > div { /*@@ all the dots, even the active one*/
  float: left;
  width: 300px;
  height: 20px;
  border: 0px solid white;
  z-index: 2;
  display: inline-block;
  margin: 5px 20px;
  border-radius: 50%;
  opacity: 1;
  
	animation: colorchangec 30s infinite; 
      -webkit-animation: colorchangec 30s infinite; 
	  
  -webkit-transition-timing-function: easeInOut; 
		  transition-timing-function: easeInOut;
  -webkit-transition-duration: 10s;
		  transition-duration: 10s;
}
.slider-nav > div:hover {
  opacity: 1;
}
.slider-nav > div.active { /*@@ dot color. I think this resets each change. Would be good to allow it to not reset*/
		/*animation: colorchange 10s; 
      	-webkit-animation: colorchange 10s; */

  -webkit-transform: scale(.2);
          transform: scale(.2);
}

@keyframes colorchange
    {
      0%   {background: rgba(46,204,113,1);}
      25%  {background: rgba(255,204,113,1);}
      50%  {background: rgba(46,255,113,1);}
      75%  {background: rgba(46,204,255,1);}
      100% {background: rgba(160,204,113,1);}
    }

    @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
    {
      0%   {background: rgba(46,204,113,1);}
      25%  {background: rgba(255,204,113,1);}
      50%  {background: rgba(46,255,113,1);}
      75%  {background: rgba(46,204,255,1);}
      100% {background: rgba(160,204,113,1);}
    }

@keyframes colorchangec
    {
       	0%   	{box-shadow: 0 -40px 20px rgba(50,255,21,.5);}
	   	20%   	{box-shadow: 0 -40px 20px rgba(32,255,0,.7);}
      	40%  	{box-shadow: 0 -40px 20px rgba(50,255,21,.6);}
	  	80% 	{box-shadow: 0 -40px 20px rgba(49,255,97,.8);}
		100%   	{box-shadow: 0 -40px 20px rgba(50,255,21,.5);}
    }

    @-webkit-keyframes colorchangec /* Safari and Chrome - necessary duplicate */
    {
      	0%   	{box-shadow: 0 -40px 20px rgba(50,255,21,.5);}
	   	20%   	{box-shadow: 0 -40px 20px rgba(32,255,0,.7);}
      	40%  	{box-shadow: 0 -40px 20px rgba(50,255,21,.6);}
	  	80% 	{box-shadow: 0 -40px 20px rgba(49,255,97,.8);}
		100%   	{box-shadow: 0 -40px 20px rgba(50,255,21,.5);}
    }