/*=======
Image Animation Controls
=======*/


/*Image-1 timing*/

@-webkit-keyframes image-1-animation {
	0% {
      opacity: 0;
    }
	5% 
      {
      opacity: 1;
    }
	29% {
      opacity: 1;
    }
	30% {
      opacity: 0;
    }
	100% {
      opacity: 0;
    }
}



/*Image-1 Text timing*/

@-webkit-keyframes text-1-animation {
	0% {
      opacity: 0;
    }
	4% {
      opacity: 1;
    }
	27% {
      opacity: 1;
    }
	28% {
      opacity: 0;
    }
	100% {
      opacity: 0;
    }
}


/*Image-2 timing*/

@-webkit-keyframes image-2-animation {
	0% {
      opacity: 0;
    }
	30% {
      opacity: 0;
    }
	35% {
      opacity: 1;
    }
	60% {
      opacity: 1;
    }
	61% {
      opacity: 0;
    }
	100% {
      opacity: 0;
    }
}


/*Image-2 Text timing*/

@-webkit-keyframes text-2-animation {
	0% {opacity:0;}
	30% {opacity:0;}
	34% {opacity:1;}
	58% {opacity:1;}
	59% {opacity:0;}
	100% {opacity:0;}
}


/*Image-3 timing*/

@-webkit-keyframes image-3-animation {
	0% {
      opacity: 0;
    }
	61% {
      opacity: 0;
    }
	66% {
      opacity: 1;
    }
	99% {
      opacity: 1;
    }
	100% {
      opacity: 0;
    }
}

@keyframes image-3-animation {
	0% {
      opacity: 0;
    }
	61% {
      opacity: 0;
    }
	66% {
      opacity: 1;
    }
	99% {
      opacity: 1;
    }
	100% {
      opacity: 0;
    }
}

/*Image-3 Text timing*/

@-webkit-keyframes text-3-animation {
	0% {
      opacity: 0;
    }
	61% {
      opacity: 0;
    }
	64% {
      opacity: 1;
    }
	97% {
      opacity: 1;
    }
	98% {
      opacity: 0;
    }
}

/*Logo timing*/

@-webkit-keyframes logo-animation {
	0% {
      opacity: 0;
    }
	5% {
      opacity: 1;
    }
	29% {
      opacity: 1; 
      right: 4vh; 
      bottom: 4vh;
    }
	30% {
      opacity:0; 
      right:4vh; 
      bottom:4vh;
    }
	31% {
      right:4vh; 
      bottom:115vh;
    }
	32% {
      opacity:0;
    }
	33% {
      opacity:1;
    }
	98% {
      opacity:1;
    }
	99% {
      opacity:0; 
      right:4vh; 
      bottom:115vh;
    }
	100% {
      opacity:0; 
      right:4vh; 
      bottom:4vh;
    }
}


/*oniste logo timing*/

@-webkit-keyframes onsite-animation {
	0% {
      opacity: 0;
    }
	34% {
      opacity: 0;
    }
	35% {
      opacity: 1;
    }
	60% {
      opacity: 1;
    }
	61% {
      opacity: 0;
    }
	100% {
      opacity:0;
    }
}


/*=======
Content Styling
=======*/

body {
	font-size: 20px;
	font-family: "Oswald", sans-serif;
}

.image-1 {
	width:100vw;
	height:100vh;
	position: absolute;
	top:0;
	left:0;
	background-image:url(images/background-1.jpg);
	background-size: 100% 100%;
	-webkit-animation:image-1-animation 30s ease-out infinite;
	animation:image-1-animation 30s ease-out infinite;
}

.image-2 {
	width:100vw;
	height:100vh;
	position: absolute;
	top:0;
	left:0;
	background-image:url(images/background-2.jpg);
	background-size: 100% 100%;
	-webkit-animation:image-2-animation 30s ease-out infinite;
	animation:image-2-animation 30s ease-out infinite;
}

.image-3 {
	width:100vw;
	height:100vh;
	position: absolute;
	top:0;
	left:0;
	background-image:url(images/background-3.jpg);
	background-size: 100% 100%;
	-webkit-animation:image-3-animation 30s ease-out infinite;
	animation:image-3-animation 30s ease-out infinite;
}

#content .slides{
	color:red;
	position: absolute;
	left:5vw;
	top:10vh;
	z-index: 10;
	opacity: 0;
}


/*Styling text for first image*/

#content .slides:nth-of-type(1){
	opacity:1;
	top: 15vh;
	-webkit-animation:text-1-animation 30s ease-out infinite;
	animation:text-1-animation 30s ease-out infinite;
}

#content .slides:nth-of-type(1) .headline-1{
	color:#B5BD00;
	font-size: 70px;
	line-height: 1;
	margin: 0;
	margin-bottom: 2vh;
	padding: 0;
}

#content .slides:nth-of-type(1) .headline-2{
	color:#C11545;
	font-size: 130px;
	line-height: 1.1;
	width:60%;
	margin: 0;
	margin-bottom: 2vh;
	padding: 0;
}

#content .slides:nth-of-type(1) .body-text {
	color:#636363;
	font-size: 60px;
	font-weight: 300;
	line-height: 1.1;
	color:#777;
	margin: 0;
	padding: 0;
	width:55%;
}


/*Styling text for second image*/

#content .slides:nth-of-type(2){
	opacity:0;
	top: 55vh;
	left:2vw;
	-webkit-animation:text-2-animation 30s ease-out infinite;
	animation:text-2-animation 30s ease-out infinite;
}

#content .slides:nth-of-type(2) .headline-1{
	color:#B5BD00;
	display: inline-block;
	font-size: 80px;
	font-weight: 400;
	line-height: 1;
	margin: 0;
	margin-bottom: 2vh;
	padding: 0;
}

#content .slides:nth-of-type(2) .headline-2{
	display: inline-block;
	color:#C11545;
	font-size: 80px;
	font-weight: 400;
	line-height: 1;
	margin: 0;
	margin-left: 2vw;
	margin-bottom: 2vh;
	padding: 0;
}

#content .slides:nth-of-type(2) .body-text {
	font-size: 43px;
	font-weight: 300;
	line-height: 1.1;
	color:#636363;
	margin: 0;
	margin-top: 1vh;
	padding: 0;
	width:100%;
}

/*Styling text for third image*/

#content .slides:nth-of-type(3){
	opacity:0;
	top: 20vh;
	-webkit-animation:text-3-animation 30s ease-out infinite;
	animation:text-3-animation 30s ease-out infinite;
}

#content .slides:nth-of-type(3) .headline-1{
	color:#C11545;
	font-size: 80px;
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
	padding: 0;
}

#content .slides:nth-of-type(3) .headline-2 {
	color:#B5BD00;
	font-size: 80px;
	font-weight: 700;
	width:60%;
	line-height: 1.1;
	margin: 0;
	padding: 0;
}

#content .slides:nth-of-type(3) .body-text {
	color:#C11545;
	font-size: 80px;
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
	padding: 0;
	width:60%;
}


.logo {
	width:10vw;
	height:5vw;
	position: absolute;
	right:4vh;
	bottom:4vh;
	background-image:url(images/logo-onthego.png);
	background-size: 100% 100%;
	z-index: 10;
	-webkit-animation:logo-animation 30s ease-out infinite;
	animation:logo-animation 30s ease-out infinite;
}

.logo-onsite {
	width:10vw;
	height:10vw;
	position: absolute;
	right:10vw;
	top:52vh;
	background-image: url(images/logo-onsite.png);
	background-size: 100% 100%;
	z-index: 10;
	-webkit-animation:onsite-animation 30s ease-out infinite;
	animation:onsite-animation 30s ease-out infinite;
}

.rise-logo {
	background-image: url(images/rise-icon.png);
	background-size: 100% 100%;
	opacity:.5;
	width:5%;
	height:5%;
	left:5%;
	top:90%;
	z-index:5;
	margin-left:-1%;
	position:absolute;
	z-index:5;
}



/* footer icons */
.github {
	 width:20%;
	 height:4%;
	 left:10%;
	 top:90%;
	 z-index:4;
	 margin-left:1%;
	 margin-top: 1%;
	 position:absolute;
	 z-index:4;
}
	
.gitbtn {
	color:white;
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;	
	text-decoration: none;
	font-size:25px;
	opacity:.5;
	z-index:4;
}

	@media only screen and (min-width: 1280px) {
	    #gitbtn {
			font-size:25px;
	    }
	}
	
	/* 1360x768 */
	@media only screen and (min-width: 1360px) {
	    #gitbtn {
			font-size:24px;
	    }
	}
	
	/* 1920x1080*/
	@media only screen and (min-width: 1920px) {	    
        #gitbtn {
			font-size: 34px;
	    }
	}
	
	/* 3840x2160 */
	@media screen and (min-width: 2200px) {
	    #gitbtn {
			font-size: 64px;
	    }
	}
