/* dela-gothic-one-regular - latin_cyrillic */
@font-face {
  font-family: 'Dela Gothic One';
  font-style: normal;
  font-weight: 400;
  src: url('../webfonts/dela-gothic-one-v4-latin_cyrillic-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../webfonts/dela-gothic-one-v4-latin_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../webfonts/dela-gothic-one-v4-latin_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../webfonts/dela-gothic-one-v4-latin_cyrillic-regular.woff') format('woff'), /* Modern Browsers */
       url('../webfonts/dela-gothic-one-v4-latin_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../webfonts/dela-gothic-one-v4-latin_cyrillic-regular.svg#DelaGothicOne') format('svg'); /* Legacy iOS */
}

* {
	transition: all ease-out 0.5s;
}
html, body {
	margin: 0;
	padding: 0;
    height: 100%;
}

body {
	background: #4731d5;
	background: linear-gradient(138deg, rgba(71,49,213,1) 0%, rgba(98,43,188,1) 80%);
    background-repeat: no-repeat;
    background-attachment: fixed;
	color: #ffffff;
	font-size: 1rem;
	font-family: 'Dela Gothic One', cursive;
	padding: 0;
	margin: 0;
	line-height: 2rem;
    overflow: hidden;
}

a {
	color: #ff3f41;
	transition: all ease-out 0.2s;
}

a:hover {
	color: #26fcab;
}

.button {
	display: inline-block;
	background: #ff3f41;
	padding: 1rem 2rem;
	border-radius: 2rem;
	color: #ffffff;
	text-shadow: 0 -2px #e1383a;
	text-decoration: none;
	font-size: 1rem;
	box-shadow: 0px 5px 0px 0px #e1383a;
	transition: all ease-out 0.3s;
}

.button:hover {
	background: #26fcab;
	color: #4731d5;
	text-shadow: 0 -2px #21d691;
	box-shadow: 0px 5px 0px 0px #21d691;
}

.wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.bg_layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;

    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

.layer_0 {
	background: url('../images/bg_layer_0.png');
}

.layer_1 {
	background: url('../images/bg_layer_1.png');
}

.layer_2 {
	background: url('../images/bg_layer_2.png');
}

.content {
	position: relative;
    text-align: center;
}

.logo_wrapper {
	position: relative;
	padding: 0 2rem;

}

.logo_container {
	position: relative;

}

.logo_container img {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	max-width: 92%;
	height: auto;
	width: 1354px;
	padding: 0 2rem;

	font-size: 5rem;
	color: #26fcab;
}

.logo_hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

.logo_hover:hover {
  opacity: 1;
}

.footer {
	position: absolute;
	bottom: 0;
	text-align: center;
	width: 100%;
	padding-bottom: 3rem;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1.3rem;
	letter-spacing: 0.07rem;
	text-shadow: -1px 0 2px #4731D5, 0 1px 2px #4731D5, 1px 0 2px #4731D5, 0 -1px 2px #4731D5, 0px 0px 10px #4731D5;
}

.footer .smaller {
	font-size: 1rem;
}