.bg1{
	width: 100%;
	height: 140%;
	background-image: url("/makeup/cut/b1.jpeg");
	background-size: 100% 100%;
	/* display: block;
	margin-left: auto;
	margin-right: auto; */
    position: relative;
    /* margin-top: 10px; */
}

.logo2{
	width: 500px; height:400px;
	position: absolute;
	right: 250;
	top: 150;
}

.ani{
	position: absolute;
	left: 20;
	bottom: 0;
}

.arpita{
	width: 100%;
	display: block;
	margin-left: auto;
    margin-right: auto;
    /* margin-top: 40px; */
    /* background-color: black; */
}

#cf img {
    animation-name: cf3FadeInOut;
    animation-timing-function: ease-in-out;
/* if you only want to cycle a finite amount of times, 
   simply change 'infinite' with # of iterations you need */
    animation-iteration-count: infinite; 
    animation-duration: 5s;
    animation-direction: alternate; /* not strictly necessary */
    position:absolute;
}

#cf img:nth-of-type(1) {
    animation-delay: 0s;
}

#cf img:nth-of-type(2) {
    animation-delay: 3s;
}



@keyframes cf3FadeInOut {
    /* distributing times evenly */
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.ff1{
	position: absolute;
	bottom: 0;
	width: 530px;
	height: 835px;
    margin-top: 100px;
	
}



	


/* .shadow{
	width: 530px;
	height: 835px;
	position: absolute;
	bottom: 0;
	
} */

.b2{
	position: absolute;
	right: 350;
	top: 550;
	height: 60px;
	width: 200px;
	font-size: 23px;
	font-weight: 500;
	background-color: #9a0f31;
	color: white;
	border-radius: 60px;
	border: none;
	/* border: 1px solid white; */

}



.b2:hover{
	background-color: rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 10;
	border: 1px solid #9a0f31;
}
    .footerabc{
     margin-bottom:-35px;   
    }



@media  (max-width:991px) and (min-width: 601px) {
    .logo2{
        width: 600px;
        height: 700px;
        position: absolute;
        left: 33px;
        top: 100;
    }
    .ff1{
      
        position: absolute;
        left: 220px;
    bottom: 0;
    width: 425px;
    height: 650px;	
    }
    .bg1{
        max-width: 100%;
        height: 150%;
    }
    .footerabc{
     margin-bottom:-35px;   
    }
}


@media (max-width: 600px) and (min-width: 374px){
    .logo2{
        width: 370px;
        height: 530px;
        position: absolute;
        left: 0px;
        top: 67px;
    }
    .ff1{
      
        position: absolute;
        left: 0px;
        bottom: 0;
        top: 620px;
        width: 370px;
        height: 600px;
    }
    .bg1{
        background-image: url('../cut/bg00000000000000000.jpeg');
        width: 100%;
        height: 200%;
        /* background-size: cover; */
    }
    .footerabc{
     margin-bottom:-35px;   
    }
    .height-container4{
        
    }
}


/* @media (max-width: 400px) and (min-width: 201px){
    .logo2{
        width: 422px;
        height: 617px;
        position: absolute;
        left: -31px;
        top: 67px;
    }
    .ff1{
      
        position: absolute;
        left: 10px;
        bottom: 0;
        top: 733px;
        width: 375px;
        height: 600px;
    }
    .bg1{
        width: 100%;
        height: 200%;
    }
} */

@media (max-width:375px) and (min-width: 150px){
    .logo2{
        width: 330px;
        height: 310px;
        position: absolute;
        left: 0;
        top: 119;
    }
    .ff1{
      
        position: absolute;
        left: -21;
        bottom: 30;
        width: 300px;
        height: 500px;	
    }
    .bg1{
        width: 100%;
        height: 200%;
        background-image: url('../cut/bg00000000000000000.jpeg');
    }
    .parallax-container{
        width: 100%;
        height: 130%;
    }
    #portfolio{
        width: 100%;
        height: 100%;
    }
    .nav-wrapper{
        width: 100%;
    }
    .height-container4{
        
    }
}