.wrap {
	height: 100vh;
	width: 100%;
	background-color: #000;
	
	overflow: hidden;
	position: relative;
	background-image: url(../images/g1.jpg);
	display:flex; flex-wrap:nowrap
    
}

.titlewrap{position: absolute; text-align: center; font-size: 3vw; z-index: 9999; width: 100%;top:15%; color: #fff; font-weight: 600}


#btns1,#btns2,#btns3,#btns4{
	font-size: 35px;
	font-weight: bold;
    flex: 1 1 25%; position: relative;
    z-index: 999;
	top: 0%; 
    border-right: solid 1px rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,1); padding-left: 3em; padding-right: 3em; text-align: center;
    transition: all ease 333ms;
    
}


#btns1:hover h4,#btns2:hover h4,#btns3:hover h4,#btns4:hover h4{
    color: #EFAA2B; font-weight: 600
}

#btns1:hover,#btns2:hover ,#btns3:hover ,#btns4:hover  { background-color: rgba(0,0,0,0.5)}


#btns1:hover ~ #p1 { opacity:1;transform:scale(1);}
#btns2:hover ~ #p2 { opacity:1;transform:scale(1);}
#btns3:hover ~ #p3 { opacity:1;transform:scale(1);}
#btns4:hover ~ #p4 { opacity:1;transform:scale(1);}    


.wrap h4{color: #fff; font-size: 2vw; font-weight: 400; position: relative}

.wrap h4:before{position: absolute; content: ''; width: 30px; height: 30px; border-left: 4px solid #fff; border-bottom: 4px solid #fff;  left:50%; margin-left: -15px; top:-70px; transition: all ease 111ms;}

#btns1:hover h4:before, #btns2:hover h4:before, #btns3:hover h4:before, #btns4:hover h4:before {transform: rotate(-45deg);}




.wrap li {
	list-style-position: outside;
	list-style-type: none;
	left: 0px;
	top: 0px;
	height: 100%;
	width: 100%;
	position: absolute;
}


#p1,#p2,#p3,#p4 {transition:all ease 733ms; transform:scale(1.1); opacity: 0;}


#p1 {
	background-image: url(../images/g2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	
	
}
#p2 {
	background-image: url(../images/g3.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	
	
}
#p3 {
	background-image: url(../images/g4.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	
	
}

#p4 {
	background-image: url(../images/g5.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	
	
}


@media(max-width:840px) {
    
   .wrap {
	height: 60vh;
	
flex-wrap:wrap;
	

	
    
}
}

@media(max-width:540px) {
    

    #btns1, #btns2, #btns3, #btns4 { padding-left: 2%; padding-right: 2%; flex:50%; border-bottom: solid 1px rgba(255,255,255,0.1)}  
    
    


.wrap h4 {
    
    font-size: 6vw;
    
}
    
    .wrap h4:before {transform: scale(0.5)}  
    
    
    
    

}