@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
:root
{
    --color-greyBg:#f9f9f9;
    --color-grey:#e5e5e5;
    --color-greyLight:hsla(0,0%,89.8%,0.66)
}

*
{
    box-sizing:border-box
}

body
{
    margin:0;
    font-family:Roboto
}

i
{
    font-style:normal
}

a:link{
	outline: none;
	text-decoration: none;
	color: black
}

a {
	color: black;
	font-style:normal;
	font-size: 14px;
	text-align: left
}


.searchBar
{   display:flex;
    justify-content:space-between;
    padding:15px;
    align-items:center;
    height:70px;
    position:sticky;
    top:0;
    background:#fff
}

.searchBar i
{
    padding:0 7.5px
}
.searchBar .logo
{
    display:flex;
    align-items:center
}

.searchBar .logo img
{
    width:100px;
    margin-left:15px
}

.searchBar .search form
{
    border:1px solid #ddd;
    height:35px
}

.searchBar .search button,.searchBar .search input
{
    border-radius:0;
    border:none;
    height:100%
    ;margin:0;
    padding:0
}

.searchBar .search input
{
    width:500px
}

.mainBody
{
    height:calc(100vh - 70px);
    display:flex;
    overflow:hidden
}

.categories
{
    width:270px;
    height:100%;
    overflow-y:scroll
}

.categories .categoriesSection
{
    display:flex;
    flex-direction:column;
    border-bottom:1px solid var(--color-greyLight);
    padding:15px 0
}

.categories .categoriesSection h3
{
    font-size:14px;
    text-transform:uppercase;
    margin:0 25px 10px
}

.categories .category
{
    width:100%;
    display:flex;
    padding:12.5px 25px;
    align-items:center;
    cursor:pointer
}

.categories .category.active
{
    background:var(--color-grey)
}

.categories .category.active i
{
    color:red
}

.categories .category span
{
    font-size:14px
}

.categories .category:hover
{
    background:var(--color-greyLight)
}

.categories .category i
{
    margin-right:25px
}

.videos
{
    background:var(--color-greyBg);
    height:100%;
    width:100%;
    padding:15px 25px;
    overflow-y:scroll

}

.videos .videosGrid
{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap
}

.videos .videosGrid .video
{
    width:calc(25% - 10px);
    margin-bottom:40px
}
.videos .videosGrid .video .thumbnail
{
    width:100%;
    height:170px
}

.videos .videosGrid .video .thumbnail img
{
    height:100%;
    object-fit:cover;
    width:100%
}

.videos .videosGrid .video .author
{
    height:40px;
    width:40px;
    border-radius:50%;
    overflow:hidden;
    margin-right:10px
}

.videos .videosGrid .video .author img
{
    height:100%;
    object-fit:cover;
    width:100%
}

.videos .videosGrid .video .details
{
    display:flex;
    padding-top:10px
}

.videos .videosGrid .video .details .text
{
    display:flex;
    flex-direction:column
}

.videos .videosGrid .video .details .text h3
{
    margin:0;
    font-weight:500;
    font-size:16px
}

.videos .videosGrid .video .details .text a
{
    color:inherit;
    text-decoration:none
}

.videos .videosGrid .video .details .text a,.videos .videosGrid .video .details .text span
{
    font-size:14px;
    margin-top:5px
}



.videos .videosTendencias
{
    display:table;
    justify-content:space-between;
    flex-wrap:wrap
}

.videos .videosTendencias .video
{
    width:calc(25% - 5px);
    margin-bottom:-60px
}
.videos .videosTendencias .video .thumbnail
{
    width:100%;
    height:170px
}

.videos .videosTendencias .video .thumbnail img
{
    height:100%;
    object-fit:cover;
    width:100%
}

.videos .videosTendencias .video .author
{
    height:40px;
    width:40px;
    border-radius:50%;
    overflow:hidden
}

.videos .videosTendencias .video .author img
{
    height:100%;
    object-fit:cover;
    width:100%
}

.videos .videosTendencias .video .details
{
	position: relative;
    display:table;
	left:355px;
	bottom: 167px
		
}

.videos .videosTendencias .video .details .text
{
    display:flex;
    flex-direction:column

}

.videos .videosTendencias .video .details .text h3
{
    margin:0;
    font-weight:500;
    font-size:16px
}

.videos .videosTendencias .video .details .text a
{
    color:inherit;
    text-decoration:none
	
}

.videos .videosTendencias .video .details .text a,.videos .videosGrid .video .details .text span
{
    font-size:14px;
    margin-top:5px
}

/*# sourceMappingURL=styles.ae8f2b9f.css.map */