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


/*****************ANIMATION******************/

.myanimation {
	font-family: 'Oswald', sans-serif;
	font-family: 'Open Sans', sans-serif;
	font-family: 'Open Sans Condensed', sans-serif;	
	}
	
.mySlides {
	display:none;
}

.w3-animate-fading{
	animation-delay:0s;
	animation:fading 12s infinite}
	@keyframes fading{
		0%{opacity:0}
		15%{opacity:1}
		95%{opacity:1}
		100%{opacity:0}
	}
	
.w4-animate-fading{
	animation-delay:0s;
	animation:fading 7s infinite}
	@keyframes fading{
		0%{opacity:0}
		15%{opacity:1}
		95%{opacity:1}
		100%{opacity:0}
	}	

.firstslide {
	background:url(../images/background1.png) center center fixed;
	background-size:100%;
	-webkit-background-size:100%;
	-moz-background-size:100%;
	/*background:green;*/
	width:100%;
	height:400px;
	animation: firstslide 10s 1;
}

@keyframes firstslide {

	0% {
		background-size:150%;
		-webkit-background-size:160%;
		-moz-background-size:160%;
	}
	25% {
		background-size:135%;
		-webkit-background-size:135%;
		-moz-background-size:135%;		
	}
	
	75% {
		background-size:115%;
		-webkit-background-size:115%;
		-moz-background-size:115%;		
	}	
	
	100% {
		background-size:100%;
		-webkit-background-size:100%;
		-moz-background-size:100%;
	}
}

.secondslide {
	background-image:url(../images/background2.png);
	background-size:cover;
	/*background:green;*/
	width:100%;
	height:400px;
	animation: firstslide 6s 1;
}

.text1 {
	clear:both;
	display:block;
	text-transform:uppercase;
	letter-spacing:5px;
	font-size:5vw;
	padding:15px 0;
	border:1px solid white;
	border-radius:60px;
	width:70%;
	margin:0 auto;
	position:relative;
	top:20%;
	transform:translate(0%,0%);
	animation: text1 3s 1;
	transition:ease all;
	white-space: nowrap;
	color: white;
	margin: 0 auto;
	text-align: center;
}

.text2wrap {
	font-size:1.5vw;
	position:relative;
	top:30%;
	text-align:center;
	margin:0 auto;
	opacity:100;
	width:auto;
	max-width:60%;	
	animation: text2wrap 3s 1;
	color: white;
	white-space: nowrap;
}

.text2 {
}

.smaller1 {
	top:35%;
	font-size:15px;
	color:yellow;
	animation: smaller1 3s 1;
	}

@keyframes text1 {
	0% {
		color:black;
		transform:rotate(0);
		width: 20%;	
		font-size: 0vw;		
	}
	25% {
	}
	65% {
		opacity:100%;
		letter-spacing:25px;
	}
	100% {
		width: 70%;	
		font-size: 5vw;
		letter-spacing: 5px;
	}	
}

@media only screen and (max-width: 767px) {
	
.text1 {
	font-size: 3vw;
}
	
	@keyframes text1 {
	0% {
		color:black;
		transform:rotate(0);
		width: 20%;	
		font-size: 0vw;		
	}
	25% {
	}
	65% {
		opacity:100%;
		letter-spacing:8px;
	}
	100% {
		width: 70%;	
		font-size: 3vw;
		letter-spacing: 5px;
	}	
}
}

@media only screen and (min-width:768px) and (max-width: 1024px) {
	
.text1 {
	clear:both;
	display:block;
	text-transform:uppercase;
	letter-spacing:5px;
	font-size:4vw;
	padding:15px 0;
	border:1px solid white;
	border-radius:60px;
	width:70%;
	margin:0 auto;
	position:relative;
	top:20%;
	transform:translate(0%,0%);
	animation: text1 3s 1;
	transition:ease all;
	white-space: nowrap;
}
	
	@keyframes text1 {
	0% {
		color:black;
		transform:rotate(0);
		width: 20%;	
		font-size: 0vw;		
	}
	25% {
	}
	65% {
		opacity:100%;
		letter-spacing:15px;
	}
	100% {
		width: 70%;	
		font-size: 4vw;
		letter-spacing: 5px;
	}	
}
}


@keyframes text2wrap {	
	0% {
		width: 20%;	
		font-size: 0vw;
	}
	25% {
	}
	65% {
	}
	100% {
		width:80%;
		font-size: 1.5vw;
	}	
}

@keyframes smaller1 {
	0% {
		font-size:0px;
	}
	100% {
		font-size:15px;
	}		
}

/*****************END ANIMATION*************/

a.myButton {
	clear: both;
	display: block;
	background: lightblue;
	color: black;
	text-align: center;
	border-radius: 30px;
	padding: 15px;
	width:200px;
	margin:0 auto;
	position:relative;
	top:50px;
	font-size:1em;
	color:black;
	font-size:1.5em;
}

a.myButton:hover {
	transition:all .2s;
	background: linear-gradient(to bottom, rgba(0,0,0,0.05), lightblue);
	color:black;
	border:1px solid white;
}

/* Safari and Chrome */

@keyframes gear1 {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.gear1 {
	position:absolute;
	top:20px;
	left:0px;
	width:20%;
	max-width:150px;
	height:auto;
    transform: rotate(20deg);  
  -webkit-animation: gear1 12s linear infinite;
  -moz-animation: gear1 12s linear infinite;
  -ms-animation: gear1 12s linear infinite;
  -o-animation: gear1 12s linear infinite;
  animation: gear1 12s linear infinite;
  opacity:0.5;
}


@keyframes gear2 {
  from {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.gear2 {
	position:absolute;
	top:100px;
	left:150px;
	width:22%;
	max-width:170px;
	height:auto;
	   transform:rotate(-3deg);
 -webkit-animation: gear2 12s linear infinite;
  -moz-animation: gear2 12s linear infinite;
  -ms-animation: gear2 12s linear infinite;
  -o-animation: gear2 12s linear infinite;
  animation: gear2 12s linear infinite;
  opacity:0.5;
}




@keyframes gear3 {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.gear3 {
	position:absolute;
	top:30px;
	left:320px;
	width:18%;
	max-width:140px;
	height:auto;
	    transform: rotate(20deg);  
  -webkit-animation: gear3 12s linear infinite;
  -moz-animation: gear3 12s linear infinite;
  -ms-animation: gear3 12s linear infinite;
  -o-animation: gear3 12s linear infinite;
  animation: gear3 12s linear infinite;
  opacity:0.5;
}



@keyframes gear4 {
  from {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);  }
}

.gear4 {
	position:absolute;
	top:100px;
	left:450px;
 	width:25%;
	max-width:180px;
	height:auto;
	   transform: rotate(20deg);  
  -webkit-animation: gear4 12s linear infinite;
  -moz-animation: gear4 12s linear infinite;
  -ms-animation: gear4 12s linear infinite;
  -o-animation: gear4 12s linear infinite;
  animation: gear4 12s linear infinite;
  opacity:0.5;
}



@keyframes gear5 {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.gear5 {
	position:absolute;
	top:30px;
	left:640px;
 	width:20%;
	max-width:150px;
	height:auto;
	   transform: rotate(20deg);  
  -webkit-animation: gear5 12s linear infinite;
  -moz-animation: gear5 12s linear infinite;
  -ms-animation: gear5 12s linear infinite;
  -o-animation: gear5 12s linear infinite;
  animation: gear5 12s linear infinite;
  opacity:0.5;
}