@font-face { 
	font-family: 'Franklin Gothic'; 
	src:url("fonts/frahv.woff") format('woff'), 
        url("fonts/frahv.ttf") format('truetype'), 
        url("fonts/frahv.otf") format('opentype'); 
}

@font-face { 
	font-family: 'Franklin Gothic Ita'; 
	src:url("fonts/frabkit.woff") format('woff'), 
        url("fonts/frabkit.ttf") format('truetype'), 
        url("fonts/frabkit.otf") format('opentype'); 
}

@font-face { 
	font-family: 'Caslon 540'; 
	src:url("fonts/caslon-540.woff") format('woff'), 
        url("fonts/caslon-540.ttf") format('truetype'), 
        url("fonts/caslon-540.woff") format('opentype'); 
}
	
body {
	font-size: 2.2vw;
	font-family: 'Franklin Gothic', sans-serif;
	text-align: center;
	line-height: 2.5vw;
	margin-left: 18px;
  	color: #000000;
	background: #ff4713;
	
 }

.titulo{
  font-family: 'Franklin Gothic', sans-serif;
	font-weight: lighter;
	color: #F4F4F4;
	text-align: center;
	letter-spacing: -0.2vw;
}
.links{
	font-size: 1.8vw;
	font-family: 'Franklin Gothic', sans-serif;
	line-height: 1.8vw;
	margin-left: 18px;
  	color: #000000;
}
.franklin_ita{
  font-family: 'Franklin Gothic Ita', sans-serif;
	font-weight: lighter;
}

.caslon540{
  font-family: 'Caslon 540', serif;
	font-weight: lighter;
	text-align: center;
}
.caslon540small{
  font-family: 'Caslon 540', serif;
	font-weight: lighter;
	font-size: 1vw;
	line-height: 0.5vw;
}

 a{
   color: #000000
 }

 .inline {
   display:inline;
   float:left;
 }
.link, .link a:hover {
	text-decoration: none;
}
.underline {
	/* I don't know why this is needed, I just added it and it worked in IE Edge. If we remove this width, the gradient breaks in IE Edge */
	width: calc(100%);
	background-image: linear-gradient(transparent calc(100% - 0.18vw), #000000 0.1vw);
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition: background-size 0.2s;
}
.link:hover .underline {
	background-size: 100% 100%;
	text-decoration: none;
}
.alignBottom {
  position: absolute;
  bottom:8px;
}
.alignRight {
	position: absolute;
	bottom:8px;
	left: 18px;
	text-align: left;
	margin-left: 1vw;
	margin-bottom: 0.5vw;
}

	
.rotate {
  -webkit-animation: mymove 1s infinite; /* Safari 4.0 - 8.0 */
  animation: mymove 1s infinite;
  position:relative;
}


@media (max-width:968px) {
	body {
	font-size: 2.2vw;
	line-height: 2.5vw;
 }
	.links{
	font-size: 1.8vw;
	line-height: 1.8vw;
}
} 
@media (max-width:767px) {
	body {
	font-size: 3vw;
	line-height: 2.5vw;
 }
	.links{
	font-size: 1.8vw;
	line-height: 1.8vw;
}
} 
@media (max-width:576px) {
	body {
	font-size: 4vw;
	line-height: 4.5vw;
 }
	.links{
	font-size: 4vw;
	line-height: 4.5vw;
	padding-left: 20px;
}
} 


/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
  from {left: 0vw;}
  to {left: 1.5vw;}
}

/* Standard syntax */
@keyframes mymove {
  from {left: 0vw;}
  to {left: 1.5vw;}
}