@font-face {font-family: "Old";  src: url("../a_OldTyperNr_Regular.ttf") format("truetype"); font-style: normal; font-weight: normal; } 
 
a {
	text-decoration: none;	
}

.container > header,
.codrops-top {
	font-family: Old, Arial, sans-serif;
	color: #fff;
	background: #c2462a;
}

.container > header {
	margin: 0 auto;
	padding: 5.5em 2em 7em;
	text-align: center;
}

.container > header h1 {
	font-size: 2.625em;
	line-height: 1.3;
	margin: 0;
	font-weight: 300;
}

.container > header span {
	display: block;
	font-size: 60%;
	opacity: 0.7;
	padding: 0 0 0.6em 0.1em;
}

/* To Navigation Style */
.codrops-top {
	text-transform: uppercase;
	width: 100%;
	font-size: 0.69em;
	line-height: 2.2;
	font-weight: 400;
}

.codrops-top a {
	text-decoration: none;
	padding: 0 1em;
	letter-spacing: 0.1em;
	color: #fff;
	display: inline-block;
}

.codrops-top a:hover {
	color: #1a6292;
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

.codrops-icon:before {
	font-family: 'codropsicons';
	margin: 0 4px;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
	content: "\e001";
}

.codrops-icon-prev:before {
	content: "\e004";
}

.related {
	background: #ecf0f1;
	color: #777;
	text-align: center;
	display:block;
	padding: 2em 10%;
}

.related a {
	font-weight: 700;
	color: #3498db;
	opacity: 0.7;
}

.related a:hover {
	opacity: 1;
}
@media screen and (max-width: 25em) {

	.codrops-icon span {
		display: none;
	}

}
.link2{
    color: #333;
    font-weight: 700;
	letter-spacing:1.2px;
    transition:all 0.4s ease-out;
}
.link2:focus,
.link2:hover{

	text-decoration:underline;

}
.link{
    color: #333;
    font-weight: 700;
	font-size: 1.3em;
    letter-spacing: 2px;
    line-height: 20px;
    display: inline-block;
    transition:all 0.4s ease-out;
}
.link:focus,
.link:hover{
    color: #1e3799;
    animation: animate .4s linear 1;
}
@keyframes animate{
    30%{ transform: translate3d(0, -5px, 0) rotate(5deg); }
    50%{ transform: translate3d(0, -3px, 0) rotate(-4deg); }
    80%{ transform: translate3d(0, 0, 0) rotate(-3deg); }
    100%{ transform: rotate(0deg); }
}
@media only screen and (max-width: 767px){
    .link{ margin-bottom: 30px; }
}
.hover-image-scale {
  display: inline-block; 
  overflow: hidden; /* Скрываем всё за контуром */
}
.hover-image-scale img {
  transition: 1s; /* Время эффекта */
  display: block; 
}
.hover-image-scale img:hover {
  transform: scale(1.09); /* Увеличиваем масштаб */
}