/*@import url('https://fonts.googleapis.com/css?family=Varela+Round');
@import 'VarelaRound-Regular.ttf'; */
@media (orientation:portrait){
}
@font-face {
  font-family: 'Varela-Round'; /*You can use whatever name that you want*/
  src: url('VarelaRound-Regular.ttf');

}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}
button {
  height: 3.5em;
  width: 9em;
  border-radius: 1.5em;
  font-family: 'Varela-Round', sans-serif ;
  
	font-weight: 600;
	font-size: 1.5em;
  	font-style: italic;
  color: #333;
  
  /* padding defines the width of the red gradient background (2) */
  padding: .20em;

  /* border-width defines the width the blue gradient background (3) */
  border: .15em solid transparent;

  background: 
    /* (1) most inner gradient */
    linear-gradient(to bottom, rgba(69,168,36,0.74), rgba(148,146,146,0.67)) content-box,
    /* (2) red gradient */
    linear-gradient(to right, rgba(62,154,19,0.62), rgba(162,91,43,0.67)) padding-box,
    /* (3) blue gradient */
    linear-gradient(to right, rgba(166,101,7,0.61), rgba(110,138,25,0.67)) border-box;
}

body, html {
  width: 100%;
  height: 100%;
  /*background: linear-gradient(to bottom, #1e5799 0%,#2989d8 20%,#207cca 51%,#7db9e8 100%); */
	background-image: url("gra1_1920.jpg") ;
	background-size: auto;
	background-position: center,center;
	background-repeat align-self: auto;
	background-repeat: no-repeat;
	
	/*background-color: #FFBA48;*/

  font-family: 'Varela-Round', sans-serif;
  font-size: 40px;
	font-weight: 600;
	

}
p {
  display: block;
  justify-content: center;
  align-items: center;
  max-width: 1024px;
  height: 25%;
  margin: 0 auto;
  font-style: oblique;
  font-size: 40px;
  font-weight: 900;
color: rgba(28,42,5,1.00)
}

nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1024px;
  height: 100%;
  margin: 0 auto;
}

nav a {
  text-decoration: none;
  font-size: 40px;
  color: rgba(28,42,5,1.00);
  position: relative;
  margin-bottom: 50px;
  transition: all .2s;
  overflow: hidden;
}
nav a:hover {
  color: rgba(181,75,11,1.00)#;
}
nav a:last-child {
  margin-bottom: 0px;
}

nav a::before {
  content: "";
  position: absolute;
  top: 0px;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #e28a25;
  z-index: 99;
  transition: all .6s cubic-bezier(0.7, 0, 0.3, 1);
}
nav a:hover::before {
  left: 100%;
}

nav a::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -2px;
  left: 100%;
  width: 100%;
  height: 4px;
  background: #996f38;
  transition: all .5s;
  transition-delay: .5s;
}
nav a:hover::after {
  left: 0%;
}



span {

  	
  	letter-spacing: 0;
  	padding: .25em 0 .325em;
	  display: block;
	  margin: 0 auto;
  	text-shadow: 0 0 80px rgba(255,255,255,.5);

/* Clip Background Image */

	 

/* Animate Background Image */

	  -webkit-text-fill-color: transparent;
	  -webkit-animation: aitf 80s linear infinite;

/* Activate hardware acceleration for smoother animations */

	  -webkit-transform: translate3d(0,0,0);
	  -webkit-backface-visibility: hidden;

  }






.class1
{  background: url("animated-text-fill.png") repeat-y;
	  -webkit-background-clip: text;
	  background-clip: text;}
.class2
{ background: url("animated-text-fill3.png") repeat-y;
	  -webkit-background-clip: text;
	  background-clip: text; }