@font-face {
  font-family:Palacio;
  src:url(Palacio.ttf);
}


.letragrande {
font-family:Palacio;
font-size:70px;

}

.margen{
margin-top:4%;
}

.top-buffer { margin-top:7%; }

body{
background-color: #FAF2d7;
font-family:Palacio;
font-size:2.5em;
color:#5e0202;
}

.teacher {
background-color: #FAF2d7;
font-family:Palacio;
font-size: 25px;
color:#5e0202;
 margin-top:9%;}
 
 .information {
background-color: #2F94A3;
font-family:Palacio;
font-size: 25px;
color:#5e0202;
 margin-top:9%;}
 
 .studies {
background-color: #FAF2d7;
font-family:Palacio;
font-size: 25px;
color:#000B5C;
 margin-top:9%;}
 
 .fashion{
background-color: #DBA393;
font-family:Palacio;
font-size: 20px;
color:#000B5C;
 margin-top:6%;}
 
 .vintage{
background-color: #C8F1F7;
font-family:Palacio;
font-size: 20px;
color:#5e0202;
 margin-top:6%;}

 .primera{
  margin-top:5%;}

  .separacion{
  margin-top:2%;
  }

.fondogranate1{
background-color: #5e0202;
}
.fondogranate1:hover{
background-color: #090125;
}

.fondogranate2{
background-color: #DBA393;
}

.fondogranate2:hover{
background-color:#2F94A3;
color: #FAF2d7;
}

.fondoazuloscuro{
background-color: #000B5C;
}

.fondoazuloscuro:hover {
background-color: #C8F1F7;
}

.fondoverde{
background-color:#2F94A3;
}

.fondoverde:hover{
background-color:#DBA393;
}

.azulclaro{
background-color: #C8F1F7;
}

.azulclaro:hover{
background-color: #090125;
color: #FAF2d7;

}

.letraverde a:hover, {
color: #C8F1F7;
text-decoration:none;
}
.letraverde a, .iconoverde {
color: #2F94A3;
text-decoration:none;
}

.iconoverde:hover {
color: #090125;
text-decoration:none;
}

.iconoazul {
color: #000B5C;
}

.iconoazul:hover{
color: #C8F1F7;
}

.iconogranate1{
color: #5e0202;
}

.iconogranate1:hover{
color: #090125;
}

.iconogranate2{
color: #BF7E6B;
}

.iconogranate2:hover{
color: #2F94A3;
}

.letrabeis a:hover{
color: #2F94A3;
text-decoration:none;
}
.letrabeis a {
color: #FAF2d7;
text-decoration:none;
}

.letragranate a:hover{
color: #2F94A3;
text-decoration:none;
}
.letragranate a {
color: #5e0202;
text-decoration:none;
}

.letrazuloscuro a{
color:#090125;
text-decoration:none;
}
.letrazuloscuro a:hover {
color: #FAF2d7;
text-decoration:none;
}

.azulclaro a{
color:#073261;
text-decoration:none;
}
.azulclaro a:hover {
color: #FAF2d7;
text-decoration:none;
}
@keyframes shakeold
{
0% 			{opacity: 1}
10% 		{-webkit-transform: translate(1px, 2px) rotate(-1deg)}
20% 		{-webkit-transform: translate(-1px, -2px) rotate(1deg)}
30% 		{-webkit-transform: translate(1px, 2px) rotate(-1deg)}
40% 		{-webkit-transform: translate(-1px, 2px) rotate(1deg)}
50% 		{-webkit-transform: translate(1px, 2px) rotate(-1deg)}
60% 		{-webkit-transform: translate(1px, -2px) rotate(1deg)}
70% 		{-webkit-transform: translate(1px, 2px) rotate(-1deg)}
80% 		{-webkit-transform: translate(-1px, -2px) rotate(1deg)}
90% 		{-webkit-transform: translate(1px, 2px) rotate(-1deg)}
100% 		{-webkit-transform: translate(-1px, 2px) rotate(-1deg)}
}
@-webkit-keyframes shakeold
{
0% 			{opacity: 1}
10% 		{-webkit-transform: translate(1px, 2px) rotate(-1deg)}
20% 		{-webkit-transform: translate(-1px, -2px) rotate(1deg)}
30% 		{-webkit-transform: translate(1px, 2px) rotate(-1deg)}
40% 		{-webkit-transform: translate(-1px, 2px) rotate(1deg)}
50% 		{-webkit-transform: translate(1px, 2px) rotate(-1deg)}
60% 		{-webkit-transform: translate(1px, -2px) rotate(1deg)}
70% 		{-webkit-transform: translate(1px, 2px) rotate(-1deg)}
80% 		{-webkit-transform: translate(-1px, -2px) rotate(1deg)}
90% 		{-webkit-transform: translate(1px, 2px) rotate(-1deg)}
100% 		{-webkit-transform: translate(-1px, 2px) rotate(-1deg)}
}

@-moz-keyframes shakeold
{
0% 			{opacity: 1}
10% 		{transform: translate(1px, 2px) rotate(-1deg)}
20% 		{transform: translate(-1px, -2px) rotate(1deg)}
30% 		{transform: translate(1px, 2px) rotate(-1deg)}
40% 		{transform: translate(-1px, 2px) rotate(1deg)}
50% 		{transform: translate(1px, 2px) rotate(-1deg)}
60% 		{transform: translate(1px, -2px) rotate(1deg)}
70% 		{transform: translate(1px, 2px) rotate(-1deg)}
80% 		{transform: translate(-1px, -2px) rotate(1deg)}
90% 		{transform: translate(1px, 2px) rotate(-1deg)}
100% 		{transform: translate(-1px, 2px) rotate(-1deg)}
}

@keyframes shake
{

0% 		{transform:  rotate(0deg)}
50%      {transform:  rotate(180deg)}
100% 		{transform:  rotate(360deg)}
}

@-webkit-keyframes shake
{

0% 		{transform:  rotate(0deg)}
50%      {transform:  rotate(180deg)}
100% 		{transform:  rotate(360deg)}
}

@-moz-keyframes shake
{
0% 		{-webkit-transform:  rotate(0deg)}
50%        {-webkit-transform:  rotate(180deg)}
100% 		{-webkit-transform:  rotate(360deg)}

}
 .rotate {
       -moz-animation: shake 1s ;
	-webkit-animation: shake 1s ;
   }    
  
  .rotate:hover {
       -moz-animation: shakeold 1s infinite;
	-webkit-animation: shakeold 1s infinite;
   }    
  
  .rotacioneny {
    -moz-transition: all 1s linear 0s; 
    -ms-transition: all 1s linear 0s;
    -o-transition: all 1s linear 0s;
    -webkit-transition: all 1s linear 0s;
    transition: all 1s linear 0s;
   
}
   .rotacioneny:hover{
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-transform:rotateY(360deg) scale(1.2);
    -ms-transform:rotateY(360deg) scale(1.2);
    -o-transform:rotateY(360deg) scale(1.2);
    -webkit-transform:rotateY(360deg) scale(1.2);
    transform:rotateY(360deg) scale(1.2);
	
}
/*rotacion logos*/
@keyframes rotar
{	
	0%{transform:rotateY(0deg)}
	100%{ transform:rotateY(-360deg)}
}

@-webkit-keyframes rotar
{
	
	0%{ -webkit-transform:rotateY(0deg)}
	100%{-webkit-transform:rotateY(-360deg) }
}

@-moz-keyframes rotar
{

	0%{ -moz-transform:rotateY(0deg)}
	100%{-moz-transform:rotateY(-360deg)}
}

.logo1
{
	
	-webkit-animation: rotar 3s;
	animation: rotar 3s;
	-moz-animation: rotar 3s;
		-o-moz-animation: rotar 3s;
	animation-delay: 2s;
	-webkit-animation-delay: 2s;
	-moz-animation-delay:2s;
		-o-animation-delay:2s;
	/*-webkit-animation-iteration-count: infinite;
	-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;*/
	
}

.logo2
{
	
	-webkit-animation: rotar 3s;
	animation: rotar 3s;
	-moz-animation: rotar 3s;
		-o-moz-animation: rotar 3s;
	animation-delay: 3s;
	-webkit-animation-delay: 3s;
	-moz-animation-delay:3s;
		-o-animation-delay:3s;
	/*-webkit-animation-iteration-count: infinite;
	-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;*/
	
}
.logo3
{
	
	-webkit-animation: rotar 3s;
	animation: rotar 3s;
	-moz-animation: rotar 3s;
		-o-moz-animation: rotar 3s;
	animation-delay: 4s;
	-webkit-animation-delay: 4s;
	-moz-animation-delay:4s;
		-o-animation-delay:4s;
	/*-webkit-animation-iteration-count: infinite;
	-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;*/
	
}

.logo4
{
	
	-webkit-animation: rotar 3s;
	animation: rotar 3s;
	-moz-animation: rotar 3s;
		-o-moz-animation: rotar 3s;
	animation-delay: 5s;
	-webkit-animation-delay: 5s;
	-moz-animation-delay:5s;
		-o-animation-delay:5s;
	/*-webkit-animation-iteration-count: infinite;
	-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;*/
	
}

.logo5
{
	
	-webkit-animation: rotar 3s;
	animation: rotar 3s;
	-moz-animation: rotar 3s;
		-o-moz-animation: rotar 3s;
	animation-delay: 6s;
	-webkit-animation-delay: 6s;
	-moz-animation-delay:6s;
		-o-animation-delay:6s;
}

.logo6
{
	
	-webkit-animation: rotar 3s;
	animation: rotar 3s;
	-moz-animation: rotar 3s;
		-o-moz-animation: rotar 3s;
	animation-delay: 7s;
	-webkit-animation-delay: 7s;
	-moz-animation-delay:7s;
		-o-animation-delay:7s;
}

.logo7
{
	
	-webkit-animation: rotar 3s;
	animation: rotar 3s;
	-moz-animation: rotar 3s;
		-o-moz-animation: rotar 3s;
	animation-delay: 8s;
	-webkit-animation-delay: 8s;
	-moz-animation-delay:8s;
		-o-animation-delay:8s;
}

.logo8
{
	
	-webkit-animation: rotar 3s;
	animation: rotar 3s;
	-moz-animation: rotar 3s;
		-o-moz-animation: rotar 3s;
	animation-delay: 9s;
	-webkit-animation-delay: 9s;
	-moz-animation-delay:9s;
		-o-animation-delay:9s;
}

/*aparicioncuadrados*/
@keyframes aparicion
{	
	0%{opacity:0;transform:scale(0.5)}
	100%{ opacity:1;transform:scale(1)}
}

@-webkit-keyframes aparicion
{
	
	0%{ -webkit-opacity:0;-webkit-transform:scale(0.5)}
	100%{-webkit-opacity:1;-webkit-transform:scale(1) }
}

@-moz-keyframes aparicion
{

	0%{ -moz-opacity:0;-moz-transform:scale(0.5)}
	100%{-moz-opacity:1;-moz-transform:scale(1)}
}

.aparicion
{
	
	-webkit-animation: aparicion 3s;
	animation:aparicion 3s;
	-moz-animation: aparicion 3s;
	-o-moz-animation: aparicion 3s;
	
}