@charset "UTF-8";
/* CSS Document */

/*turn of text highlight*/
html {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

body {
	font-family: 'Oswald', sans-serif;
}

/* header text */
#header {
    background: -webkit-linear-gradient(top, rgba(254,255,255,0.2) 0%,rgba(255,255,255,0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-size: 144px;
    font-weight: bold;
    letter-spacing: 3px;
    width:100%;
    height:30%;
    left:0%;
    top:3.5%;
    z-index:4;
    position:absolute;
}   

/* text transition - content */
#content {
    width:100%;
    height:50%;
    left:0%;
    top:30.0839%;
    z-index:3;
    position:absolute;
	-webkit-transform: translateZ(0);
}

.slides {
	width:75%;
	height:auto;
	position: absolute;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	z-index: 6;
	text-align: center;
	padding: 20px;
	color: rgba(255,255,255,1);
	-webkit-transform:translate(-50%, -50%);
	-webkit-animation: slide2Animation 30s ease-in-out infinite;
}

.slides h2 {
	font-family: 'Oswald', sans-serif; 
	font-size: 50px;
	font-weight:bold;
	line-height: 1.2em;
}

.slides p {
	font-size: 42px;
	font-weight: 300;
	line-height: 1.2em;
	opacity:1;
}

/*Slide starting position at right hand side*/

.slides:first-of-type {
	left:125%;
	opacity:0.3;
	-webkit-animation: slide3Animation 30s ease-in-out infinite;
	-webkit-perspective: 1000;
}

/*Slide starting position at left hand side*/

.slides:nth-of-type(3n) {
	left:-25%;
	opacity: 0.3;
	-webkit-animation: slide1Animation 30s ease-in-out infinite;
	-webkit-perspective: 1000;
	
}
/*.slides:nth-of-type(4n) {
}*/

/*Slide starting position off screen*/

.slides:last-of-type {
	left:200%;
	-webkit-animation: slide4Animation 30s ease-in-out infinite;
	-webkit-perspective: 1000;
}

    /* 1280x850 */

	@media only screen and (min-width: 1280px) {
	    #header {
			font-size: 144px;
	    }
		.slides h2 {
	    	font-size: 60px;
	    }

	    .slides p {
	    	font-size: 52px;
	    }
	}
	
	/* 1360x768 */
	@media only screen and (min-width: 1360px) {
	    #header {
			font-size: 150px;
	    }

	    .slides h2 {
	    	font-size: 60px;
	    }

	    .slides p {
	    	font-size: 52px;
	    }
	}
	
	/* 1920x1080*/
	@media only screen and (min-width: 1920px) {	    
        #header {
			font-size: 190px;
	    }

	    .slides h2 {
	    	font-size: 90px;
	    }

	    .slides p {
	    	font-size: 80px;
	    }
	}
	
	/* 3840x2160 */
	@media screen and (min-width: 2200px) {
	    #header {
			font-size: 380px;
	    }

	    .slides h2 {
	    	font-size: 180px;
	    }

	    .slides p {
	    	font-size: 160px;
	    }
	}


#logo {
    width:25%;
    height:10%;
    left:70%;
    top:90%;
    z-index:1;
    position:absolute;
}

#logo img{
    width:100%;
    height:auto;
}

/* background animation */
#gradient {
    height:100%;
    width:100%;
    margin:0;
    overflow:hidden;
    background-size:contain; 
}

#background {
	overflow: hidden;
	position: relative;
	text-align: center;
}

#background img {
    min-width:100%;
	-webkit-animation-duration: 275s;
    -webkit-animation-name: slidein;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
}

/*Keyframe animation for slide 1*/

@-webkit-keyframes "slide1Animation" {
 20% {left:-25%;opacity:0.2;}
 25% {left:-100%; opacity:0.2;}
 40% {left:-100%;opacity:0}
 45% {left:200%;opacity:0}
 50% {left:125%;opacity:0.2;}
 70% {left:125%;opacity:0.2;}
 75% {left:50%;opacity:1;}
 95% {left:50%;opacity:1;}
 100% {left:-25%;opacity:0.2;}
}

/*Keyframe animation for slide 2*/

@-webkit-keyframes "slide2Animation" {
 20% {left:50%;opacity:1;}
 25% {left:-25%; opacity:0.2;}
 45% {left:-25%;opacity:0.2;}
 50% {left:-100%;opacity:0.2;}
 55% {left:-100%;opacity:0;}
 70% {left:200%;opacity:0;}
 75% {left:125%;opacity:0.2;}
 95% {left:125%;opacity:0.2;}
 100% {left:50%;opacity:1;}
}

/*Keyframe animation for slide 3*/

@-webkit-keyframes "slide3Animation" {
 20% {left:125%;opacity:0.2;}
 25% {left:50%; opacity:1;}
 45% {left:50%;opacity:1;}
 50% {left:-25%;opacity:0.2;}
 70% {left:-25%;opacity:0.2;}
 75% {left:-125%;opacity:0;}
 80% {left:200%;opacity:0;}
 95% {left:200%;opacity:0.2;}
 100% {left:125%;opacity:0.2;}
}

/*Keyframe animation for slide 4*/

@-webkit-keyframes "slide4Animation" {
 20% {left:200%;opacity:0.2;}
 25% {left:125%; opacity:0.2;}
 45% {left:125%;opacity:0.2;}
 50% {left:50%;opacity:1}
 70% {left:50%;opacity:1;}
 75% {left:-25%;opacity:0.2;}
 95% {left:-25%;opacity:0.2;}
 100% {left:-100%;opacity:0;}
}


@-webkit-keyframes "slidein" {
 25% {
   -webkit-transform: scale(1.6) translate3d(-400px, 0px, 0px);
   transform: scale(1.6) translate3d(-400px, 0px, 0px);
 }
 50% {
   -webkit-transform: scale(1) translate3d(0px, 0px, 0px);
   transform: scale(1) translate3d(0px, 0px, 0px);
 }
 75% {
   -webkit-transform: scale(1.6) translate3d(+400px, 0px, 0px);
   transform: scale(1.6) translate3d(+400px, 0px, 0px);
 }
}

/* footer icons */
#github {
	 width:20%;
	 height:4%;
	 left:10%;
	 top:90%;
	 z-index:4;
	 margin-left:-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;
	    }
	}

#rise {
	opacity:.5;
	width:5%;
	height:4%;
	left:5%;
	top:90%;
	z-index:5;
	margin-left:-1%;
	position:absolute;
	z-index:5;
}

#risebtn {
    width:auto; 
    height:100%;   
}