@font-face {
    font-family: Narrow; /* Гарнитура шрифта */
    src: url(fonts/AGLettericaCondensedC.otf); /* Для IE5-8 */
    src: local(PT_Serif), url(fonts/AGLettericaCondensedC.otf); /* Для остальных браузеров */
   }    
   
@font-face {
    font-family: Narrow; /* Гарнитура шрифта */
    src: url(fonts/AGLettericaCondensedC.otf); /* Для IE5-8 */
    src: local(PT_Serif), url(fonts/AGLettericaCondensedC.otf); /* Для остальных браузеров */
   }  
   
 
 
body{width:100vw; height:100vh; padding:0; margin:0; position:relative;  } 

#dark_blue{ width:44%; height:100vh;background: linear-gradient(90deg, #10141A, #354452); position:absolute;}
#silver{width:100%; height:100vh; background: linear-gradient(45deg, #F2F2F2, #D8D8DB); overflow: hidden;}

.vertical-menu {
	position:absolute;
	top: 5%;
	left: 4vw;
    width: 200px; /* Set a width if you like */
}

.vertical-menu p {
    color: #A6A7AB; /* Grey background color */
     background:;
    display: block; /* Make the links appear below each other */
    padding: 12px 0; /* Add some padding */
    text-decoration: none; /* Remove underline from links */
	font-family:Narrow;
	font-size:1vw;
	cursor: pointer;
}

.vertical-menu p:hover {
    color: #ccc; /* Dark grey background on mouse-over */
}

.vertical-menu p.active {
    background-color: #A6A7AB; /* Add a green color to the "active/current" link */
    color: #10141A;
}

/* Слово */
#slovo{font-size:1.2vw; 
font-family:Narrow; 
text-align:right; 
position:absolute; 
top:3%; 
right:7%; 
width:33%;
text-transform:uppercase;
color:#8C95A2;}



#my_name{color:white; font-size:18px; font-family:Narrow; position:absolute; 	
	bottom: 5%;
	left: 8%;}

 
	
#foto{position:absolute; bottom:-15%; left:30%; height:111%;}

#content_main{position:absolute; width:50%; height:80%;	top: -100%; right:8vh; overflow: auto; }
	
#content_main h1{font-size:2.5vw; font-family:Narrow; color:#354452; margin-top:0; margin-bottom:15px; text-transform: uppercase;}
#content_main h2{font-size:2vw; font-weight:400; font-family:Narrow; color:#5B6C7E; margin-top:0; text-transform: uppercase;}
#content_main h3{font-size:1.5vw; font-weight:500; font-family:Narrow; color:#5B6C7E; margin-top:0; margin-bottom:0;text-transform: uppercase;}
#content_main p{font-size:1vw; font-weight:400; font-family:Narrow; color:#5B6C7E; margin-top:0; }



#content_port{position:absolute; width:75%; height:90%;top:5%; right:-100%; background:tomato; overflow: auto; }
 

#content_service{position:absolute; width:50%; height:80%;	bottom:-100%; right:8vh;}
#content_service h2{font-size:2vw; margin-bottom:1%; font-weight:400; font-family:Narrow; color:#5B6C7E; margin-top:0; cursor: pointer;}
#content_service p{font-size:1vw; font-weight:400; margin-bottom:1%; font-family:Narrow; color:#5B6C7E; margin-top:0; }
.block{margin-bottom:3%; display:none;}

#content_contact{position:absolute; width:50%; height:80%;	top:35%; left:-100%;}
#content_contact p{font-size:2vw; margin-bottom:1%; font-weight:400; font-family:Narrow; color:#5B6C7E; margin-top:0; cursor: pointer;}
#content_contact a{color: #10141A; /* цвет текста */ text-decoration: none; /* убирать подчёркивание у ссылок */}


.an_foto{transition: all 2s ease;}
.an_dark{transition: all 2s ease;}
.an_content{transition: all 2s ease;}
.an_content2{transition: all 2s ease;}


.an_link{transition: all 1s ease;}

.an_t{transition: all 2s ease 1s;}
.an_tl{transition: all 1s ease 2s;}

.an_j{transition: all 2s ease;}


#skills{width:80%; margin-top:0%;}
	
.an_distance{
transition-property:all;
transition-duration:1s;
}

.punct{height:20%;}
.stick{


}

/*кргуляши*/
.kulka_ciemna{background:#5B6C7E; width:0%; margin-right:15%; margin-bottom:2%; aspect-ratio: 1/1; border-radius:100%; position:relative; float:left;}
.kulka_jasna{background: linear-gradient(45deg, #F2F2F2, #D8D8DB); width:90%; left:5%; top:5%; position:absolute; aspect-ratio: 1/1; border-radius:100%; text-align:center;  display:table;}
.pp{vertical-align:middle; display: table-cell; color:#171D24; font-family:arial;  font-weight:600; font-size:0vw; opacity:0;}


/* */


/*галерея на главной*/

.galary_liu {
  display: flex;
  width: 100%;
  padding: 4% 2%;
  box-sizing: border-box;
  height: 44vh;
  font-family:Narrow;
}

.box {
  flex: 1;
  overflow: hidden;
  transition: 0.5s;
  margin: 0 2%;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
  line-height: 0;
}

.box > img {
  width: 200%;
  height: calc(100% - 10vh);
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.5s;
}

.box > span {
  font-size: 3.8vh;
  display: block;
  text-align: center;
  height: 10vh;
  line-height: 2.6;
}

.box:hover {
  flex: 1 1 50%;
}

.box:hover > img {
  width: 100%;
  height: 100%;
} 

/*галерея портфолио*/

.gallery {
  width: 100%;
  margin: auto;
  border-radius: 3px;
  overflow: hidden;
}

.img-c {
  width: 33.33333%;
  aspect-ratio: 1/1;
  float: left;
  position: relative;
  overflow: hidden;
}

.img-w {
  position: r;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform ease-in-out 300ms;
}

.img-w img {
  display: none;
}

.img-c {
  transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}

.img-c:hover .img-w {
  transform: scale(1.08);
  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}





#link{font-size:18px; font-family:Narrow; position:absolute; 	
	bottom: 0%;
	right: 8%;}
#link p{color: #10141A; /* цвет текста */
	}
	
@media all and (orientation:portrait) {
 
}