@font-face {
  font-family: 'Arvo';
  font-display: auto;
  src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

a{
	text-decoration: none;
}

td{
	padding: 10px 5px 10px 5px;
}

body{
	padding: 0;
	margin: 0;
	background: rgba(53, 63, 66, 0);
	color: #000000;
}
button{
	padding: 0;
	border: none;
	background: none;
}

.header{
	position: fixed;
	width: 100%;
	height: 370px;
	padding: 0;
	margin: 0;
	background: #eeeeee;
	font-family: 'Amatic SC', sans-serif;
	z-index: 10;
}

/* Contacts */

#contacts{
	display: flex;
	position: fixed;
	margin: 0;
	padding: 10px;
	color: rgb(0, 0, 0);
	z-index: 15;
}
#contacts_btn{
	background-image: url("/img/socials/contacts.svg");
	background-repeat: no-repeat;
	background-size: 100%;
	display: flex;
	position: relative;
	width: 48px;
	height: 48px;
}
.pointer{
	cursor: pointer;
	z-index: 1;
}
#socials{
	display: flex;
    position: absolute;
}
.social-names{
	position: relative;
	display: none;
	left: 10px;
	font-family: 'Roboto', sans-serif;
	color: rgb(0, 0, 0);
}
.telegramm, .skype, .callphone, .email, .card, .upwork{
	position: absolute;
	display: flex;
	width: 45px;
	height: 45px;
	opacity: 0;
	transition: 0.4s all ease;
	pointer-events: none;
}
.telegramm-anim{
	opacity: 1;
	pointer-events: auto;
	transform: translateX(70px);
}
/* .vkontakte-anim{
	opacity: 1;
	pointer-events: auto;
	transform: translate(70px, 50px);
} */
.skype-anim{
	opacity: 1;
	pointer-events: auto;
	transform: translate(70px, 50px);
}
.callphone-anim{
	opacity: 1;
	pointer-events: auto;
	transform: translate(70px, 100px);
}
.upwork-anim{
    opacity: 1;
	pointer-events: auto;
	transform: translate(70px, 100px);
}
.email-anim{
	opacity: 1;
	pointer-events: auto;
	transform: translate(70px, 150px);
}
.card-anim{
	opacity: 1;
	pointer-events: auto;
	transform: translate(70px, 200px);
}
[class*="anim"]:hover{
	opacity: 0.7;
}
.logo-img{
	width: inherit;
	height: inherit;
}


#language{
	display: block;
    position: fixed;
	top: 68px;
	width: 48px;
	height: 48px;
    font-size: 2.35em;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0px 10px 10px 10px;
    color: rgb(0, 0, 0);
    z-index: 15;
}

P.thename{
	padding-top: 20px;
	margin: 0;
	font-size: 80pt;
	text-align: center;
	color: #000000;
}

P.about{
	color: #000000;
	padding: 50px;
	margin: 0;
	font-family: 'Roboto', sans-serif;
	text-align: center;
	font-size: 18pt;
}

/* masonry */
.separator-header-content{
	position: relative;
	margin: 0;
	padding: 0;
	top: 300px;
	width: 100%;
	height: 50px;
	background: linear-gradient(to top, rgba(206, 212, 218, 1), rgba(238, 238, 238, 0.17));
	z-index: 100;
}

.content{
	width: 100%;
	position: relative;
	top: 300px;
	padding: 5px 0 0 0;
	margin: 0 0 0 0;
	background: #353f42;
	z-index: 100;
}

.sizer1{
	width: 100%;
}
.sizer2{
	width: 50%;
}
.sizer4{
	width: 24.9%;
}

.item-masonry{
	position: relative;
	margin: 1px;
	display: block;
	overflow: hidden;
}

.item-masonry:after{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	box-shadow: 0 0 70px 30px rgba(33,44,45,.5) inset;
	z-index: -1;
	content: "";
}

.item-masonry img{
	width: 100%;
	height: auto;
	display: block;
	opacity: .93;
}

.cover-item-gallery{
	background-color: #000000;
	opacity: .0;
	position: absolute;
	width: 100%;
	top: 0;
	bottom: 0;
	display: block;
	transition: opacity 600ms;
}

.cover-item-gallery:hover{
	opacity: 0.6;
}

.cover-item-gallery a{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
}

.cover-item-gallery a i.fa{
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -35px;
	margin-top: -31px;

	background-image: url("/img/socials/round-play_arrow.svg");
	background-repeat: no-repeat;
	background-size: 100%;
	display: flex;
	width: 62px;
	height: 62px;
}

/* i:hover::after {
  content: attr(data-title);
  position: relative;
	bottom: 8px;
	left: 5px;
	font-family: 'Roboto', sans-serif;
  color: #000;
  text-align: center;
	font: 14pt sans-serif;
} */


.type-app{
	position: relative;
	top: 50%;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font: 20pt sans-serif;
	color: #fff;
	text-decoration: none;
}

.about{
	padding: 5px;
	font-family: 'Roboto', sans-serif;
	font: 20pt sans-serif;
	text-align: left;
	color: rgb(255, 255, 255)
}

/* popups */
.b-popup{
	width:100%;
	height: 100%;
    background-color: rgba(0,0,0,0.5);
    position:fixed;
	top:0px;
	overflow: auto;
}

img { 
  opacity: 1; 
  transition: opacity 0.3s; 
} 

img[data-src] { 
  opacity: 0; 
}