
.main.bio{
	background-color:#ecf9fe;
	height:100%;
	
}





/*---------------------------------------------------БИО-----------------------------------*/

.content.bio {
	padding-top:0;
	background-color:#fcfbf2;
	
	

}
#bio-1 {
	
		background:url(../img/bio/fon.jpg) 50% 50% no-repeat;
background-size:cover;
	width:100%;
	
	height:100vh; 
	position: absolute;

	overflow:hidden;
	left: 0;
top:0;

	

}





#bottle1 {
	position:absolute;
	left:20%;
	top:59%;
			 transform:  translate(-50%,-50%);
 	-webkit-transform:  translate(-50%,-50%);
	-ms-transform:   translate(-50%,-50%);
	 -moz-transorm:  translate(-50%,-50%);
	 o-transform:  translate(-50%,-50%);
	

	 

}
#bottle2 {
	position:absolute;
	left:50%;
	top:61%;
			 transform:  translate(-50%,-50%);
 	-webkit-transform:  translate(-50%,-50%);
	-ms-transform:   translate(-50%,-50%);
	 -moz-transorm:  translate(-50%,-50%);
	 o-transform:  translate(-50%,-50%);

}
#bottle3 {
	position:absolute;
	right:2%;
	top:63%;
			 transform:  translate(-50%,-50%);
 	-webkit-transform:  translate(-50%,-50%);
	-ms-transform:   translate(-50%,-50%);
	 -moz-transorm:  translate(-50%,-50%);
	 o-transform:  translate(-50%,-50%);

}
.bootleg{
 animation: bootleg 0.7s ease-in-out;
 Animation-fill-mode: forwards
}

.leaves{
 animation: leaves 0.7s ease;
 Animation-fill-mode: forwards;
  animation-delay:0.6s;
 
}

.finale{
 animation: finale 0.5s cubic-bezier(.8,.12,.35,.87);
 Animation-fill-mode: forwards
}

.finale2{
 animation: finale2 0.8s cubic-bezier(.8,.12,.35,.87);
 Animation-fill-mode: forwards
}

.ya {
opacity:1;
	
}
.bio-p1 {
	font-size:16px;
	line-height:130%;
	font-family: 'gb';
	margin-bottom:50px;
	text-align:center;
}

.bio-p2 {
	font-size:26px;
	line-height:110%;
	font-family: 'gb';
	margin-bottom:50px;
	text-transform:uppercase;
	text-align:center;
}

.resume {
	border-bottom:2px #2b1b13 solid;
	border-top:2px #2b1b13 solid;
	padding-top:50px;
	margin-top:50px;
	margin-bottom:50px
	
}

.res-logo {
	text-align:center
}

@keyframes bootleg{
  0% {
	  opacity:0
	  	  
    }

	
	  100% {
		  opacity:1


    }
}
@keyframes leaves{
  0% {
	 		 transform:  translate(0%,30%);
 	-webkit-transform:  translate(0%,30%);
	-ms-transform:   translate(0%,30%);
	 -moz-transorm:  translate(0%,30%);
	 o-transform:  translate(0%,30%);
	 opacity:0;
	  	  
    }

	
	  100% {

		 transform:  translate(0%,0%);
 	-webkit-transform:  translate(0%,0%);
	-ms-transform:  translate(0%,0%);
	 -moz-transorm: translate(0%,0%);
	 o-transform: translate(0%,0%);
	 opacity:1
    }
}
.rot1{
 animation: rot1 1.5s cubic-bezier(.57,1.8,.5,.49);
 Animation-fill-mode: forwards
}

.rot2{
 animation: rot1 1.5s cubic-bezier(.57,1.8,.5,.49);
 animation-delay:0.3s;
 Animation-fill-mode: forwards
}

.rot3{
 animation: rot1 1.5s cubic-bezier(.57,1.8,.5,.49);
 animation-delay:0.6s;
 Animation-fill-mode: forwards
}

#bot-img1, #bot-img2, #bot-img3 {
	
}
@keyframes rot1{
  0% {
	 		 transform: rotate(-15deg);
 	-webkit-transform: rotate(-15deg);
	-ms-transform: rotate(-15deg);
	 -moz-transorm: rotate(-15deg);
	 o-transform: rotate(-15deg);
	 opacity:0
	  	  
    }

	
	  100% {

	 		 transform:  rotate(0deg);
 	-webkit-transform: rotate(0deg);
	-ms-transform:  rotate(0deg);
	 -moz-transorm:rotate(0deg);
	 o-transform: rotate(0deg);
	  opacity:1
    }
}
@keyframes finale{
  0% {
	  top:70%;
	  opacity:0;
	  	  
    }

	
	  100% {
		  top:0%;
		  opacity:1
    }
}
@keyframes finale2{
  0% {
background-color:rgba(235,231,220,0);
	  	  
    }

	
	  100% {
background-color:rgba(235,231,220,1);
    }
}
#ya1 {
	position:absolute;
	left:-150px;
	top:160px
}
#ya2 {
	position:absolute;
	left:155px;
	top:300px
}

#ya3 {
	position:absolute;
	left:-35px;
	top:385px
}


#ya4 {
	position:absolute;
	left:-105px;
	top:0px
}

#ya5 {
	position:absolute;
	left:160px;
	top:40px
}


#ya6 {
	position:absolute;
	left:160px;
	top:100px
}


#ya7 {
	position:absolute;
	left:-100px;
	top:380px
}


#ya8 {
	position:absolute;
	left:130px;
	top:240px
}

#ya9 {
	position:absolute;
	left:-50px;
	top:-40px
}


#ya10 {
	position:absolute;
	left:200px;
	top:120px
}
#ya11 {
	position:absolute;
	left:190px;
	top:120px
}
#ya12 {
	position:absolute;
	left:10px;
	top:330px
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  
}




