*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body{
	position:relative;
	background:black;
	
	overflow-x:hidden;
}

.body-container{
	width: 100%;
	
	padding: 30px;
	
}
.service-seg { margin-bottom: 4em; padding-bottom: 2em;

}


.font-sans {
    font-family: 'vivo-medium', 'Libre Franklin', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-vivo-body {
    font-family: 'vivo-light-body', 'Libre Franklin', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    ;
}

.font-vivo-body-bold {
    font-family: 'vivo-bold-body', 'Libre Franklin', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    ;
}

.vivo-tall-bold {
    font-family: 'vivo-tall-bold', 'Libre Franklin', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    ;
}



.vivo-tall-medium{ font-family: 'vivo-tall-medium'; font-weight: 100;}


.vivo-tall-light{ font-family: 'vivo-tall-light'; font-weight: 100;}


.vivo-tall-book{ font-family: 'vivo-tall-book'; font-weight: 100;}

.vivo-tall-books{ font-family: 'vivo-tall-books'; font-weight: 100;}

.vivo-tall-booker{ font-family: 'vivo-tall-booker'; font-weight: 100;}



.vivo-tall-hot{ font-family: 'vivo-tall-hot'; font-weight: 100;}


.brand-logo{
	width: 100%;
}

.youtube-box{
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height:100%;
	object-fit:cover;
	
}

.youtube-box.inactive{
	visibility:hidden;
}

.top-youtube{
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height:100%;
	object-fit:cover;
	/* z-index:; */
}

.hero-area.inactive{
	visibility:hidden;
}

.single-youtube{
	cursor:pointer;
}

.works-box {
    position: absolute;
    top: 249px;
    right: 530px;
    display: flex;
    color: rgb(255 0 0);
    z-index: 14;
    font-family: 'vivo-tall-bold';
}

.works-box>p{
	    font-size: 100px;
    margin-right: 20px;
}

.categories-box{
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-top: 35px;
}

.the-categories{
	width: 300px;
	height: 40px;
	color:white;
	margin:auto;
	/* text-align:center; */
	display:flex;
	justify-content: space-evenly;
	align-items:center;
	list-style:none;
	background:black;
	border: 1px solid #F5EB17;
	border-radius: 48px;
	z-index:10;
}

.the-categories>li:first-child{
	border-right:1px solid #F5EB17;
	height:100%;
	display:flex;
	align-items:center;
	padding-right: 30px;
}

.the-categories>li:last-child{
	border-left:1px solid #F5EB17;
	height:100%;
	display:flex;
	align-items:center;
	padding-left: 30px;
}

.single-category{
	cursor:pointer;
}

.single-category.active{
	color:#F5EB17;
}

.projects-container{
	width:100%;
	min-height:80vh;
	color:white;
	margin-top:30px;
	z-index: 99;
}



.projects-container-filter{
	width:100%;
	height:100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr ;
	grid-gap: 40px;
}

.skroll{ border: 1px solid #FFF;
    width: 41px;
    margin: 0 auto;
    border-radius: 26px; opacity: .6;
    height: 60px;
    padding-top: 10px; }

.projects-container-filter>article{
	width: 100%;
	height: 300px;
}

.projects-container-filter>article>header{
	height:80%;
	background: #C4C4C4;
	border-radius: 5px;
	margin-bottom: 15px;
}

.projects-container-filter>article>footer>h3{
	font-size: 22px;
}


.projects-container-filter>article>footer>h4{
	font-size: 29px;
}


@media(max-width: 1000px){
	.projects-container-filter{
		grid-template-columns: 1fr 1fr;
		
	}
}

@media(max-width: 700px){
	.projects-container{
		overflow-x:scroll;
		overflow-y:hidden;
	}
	
	.projects-container-filter{
		width:150%;
		grid-template-columns: 1fr 1fr;
		
	}
	
	.projects-container-filter>article{
		height: 200px;
	}
	
	
	
}