/*
Theme Name: Twenty Twenty Extends
Text Domain: twentytwenty
Version: 1.2
Description: custom layout to careers
Tags: custom layout to careers
Author: Robson de Souza / LiveOn Solutions
Author URI: 
Theme URI: 
14, November, 2021


*/

@font-face {
  font-family: KlarheitGroteskRegular;
  src: url(/wp-content/themes/sellerx/assets/fonts/ESKlarheitGrotesk/ESKlarheitGrotesk-Regular.woff);
}

ul.post-stories {
     list-style-type: none;	 
}

.post-stories .blockpost{
	border: 1px solid #000000;
	box-sizing: border-box;
	border-radius: 16px;
	padding:10px;
	height:420px;	
	max-height:420px;
	min-height:420px;
	display:inline-block;
	float:left;		
	max-width:520px;
	min-width:410px;
	width:410px;
}
.post-stories .blockpost:first-child{
	margin-right:20px;
}
.post-stories .byimage{
	display:block;
	width:100%;
	border-radius:8px;
	height:250px;	
	max-height:250px;
	min-height:250px;
	max-width:500px;
	min-width:390px;
	
	overflow:hidden;
}
.post-stories .byimage a img{
	width:390px;
	max-width:500px;
	min-width:390px;
}
.post-stories .bytitle{
	display:block;
	margin-top:10px;
	width:100%;
	padding:0px 4px 0px 4px;	
	height:115px;
	overflow:hidden;
}
.post-stories .bytitle a{
	font-family:"KlarheitGroteskRegular";
	font-size:2.4rem;
	line-height:32px;
	color:#000000;
	font-weight:400;
}

.post-stories .byinfo{
	display:block;	
	font-size:1.4rem;	
	color:#000000;	
	height:30px;
	padding:0px 4px 0px 4px;	
}
.post-stories .byicon, .post-stories .byicon2{
	margin-right:10px;
	float:left;	
}
.post-stories .byicon2{
	margin-left:12%;
}
.post-stories .bydate, .post-stories .bytext{
	float:left;
	margin-top:3px;
}
.top-margin-post-stories{
	margin-top:20px;
}


/*
* ======================= GREENHOUSE JOBS LIST IN CAREERS PAGE ====================================  
*/

@font-face {
  font-family: ESKlarheitGrotesk;
  src: url(/wp-content/themes/sellerx/assets/fonts/ESKlarheitGrotesk/ESKlarheitGrotesk-Regular.woff);
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600&display=swap');


body{
	font-family: ESKlarheitGrotesk;
	font-size:24px;
	color:#000000;
	background-color: #F5F4F3;
}


.job-block{
    font-family:ESKlarheitGrotesk !important;
	color: #000000 !important;
	border:1px solid #000000 ;
	border-radius:8px ;
	padding: 20px ;
	margin-bottom:20px ;
	
	min-height:140px ;
	height: 140px ;	
	transition: all 0.2s ;
	overflow:hidden;
}
.job-block:hover	
{
    background-color:#fff;	
	cursor: pointer;
}
.job-block:hover  .opening .job-extra .departament
{
	background-color:#07979E !important;              
}
.job-title:hover{
	color:#000 !important;
	text-decoration: none;
}

.job-title{
    height: 70px ;
	display:block;
	overflow:hidden;
	padding-top:5px;
	margin-bottom:10px;
    
	font-size: 30px;
	font-weight:normal ;
	color:#000000 !important;
	line-height: 26px;
	letter-spacing: 0.08em;
}
.job-extra{
    display: block;
    height: 30px ;
	display:block;
	font-size: 1.3rem;
}
.job-extra span{
    display: inline-block;
    vertical-align: middle;
}
.job-extra .updated_at{
    margin-right: 30px;
}
.job-extra-icon{
    display:inline-block;
    width:22px;
    height:22px;
}
.updated_at .job-extra-icon{
     background-image: url('/wp-content/uploads/2021/07/icon_calender.png');
    background-repeat: no-repeat;
    background-position: 0px -1px;
    background-size: 18px 20px;
	opacity: 1;
}
.location .job-extra-icon{
     background-image: url('/wp-content/uploads/2021/07/icon_place.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 22px 22px;
	opacity: 1;
}
.departament{
    float:right;
    background-color: #FF8464;    
	padding:3px 17px 1px 17px;
    font-size: 14px;
	line-height: 25px;
    border-radius:50px;
	color:#fff ;
	margin-top: -5px;
}
.departament:hover{
	background-color:#07979E;
}
.job-extra-details{
    padding-bottom: 20px;
    border-bottom:1px solid #000000;
    margin-bottom: 30px;
}



/*
* ----- filter
*/
.job-filter-block{
    display: block;
    position: relative;    
    padding-bottom: 20px;
    margin-bottom: 40px;
	
}
.job-filter-list{
    display: inline-block;
    padding:3px 17px 1px 17px;
    margin-right:10px;
    border:1px solid #000000;
    font-size: 14px;
	line-height: 25px;
    border-radius:50px;
    margin-bottom: 10px;
	height:32px;
    
    text-transform: uppercase;
    transition: all 0.2s ;
}
.job-filter-list-selected{
    background-color: #FF8464;
    border:1px solid #FF8464;
	color:#fff !important;
}
.job-filter-list{
    font-family:ESKlarheitGrotesk !important;
	font-weight:normal !important;
	color:#000000;
}
.job-filter-list:hover{
    background-color: #FF8464 ;
    border:1px solid #FF8464;
	color: #fff;
}
.job-filter-total{
    display: block;
    position: relative;
    margin-bottom: 15px;
	font-size: 18px;
	line-height: 30px;
	color: #000000;
	font-weight: 700;
	letter-spacing: 1px;
}

.bg-search-job{
	background-color:#fff !important;
	border-radius:5px !important;
}
.toggle-inner{
	position:absolute !important;
	top:15px;
	left:10px;
	opacity:0.5;		
}
.search-job{
	padding-left:40px !important;
	border-radius:5px !important;
}



/* careers  mobile */
@media (max-width:999px){
	.job-block{
		min-height:222px ;
		height: 222px ;	
		border-radius: 20px;
	}
	.job-title{
		height:60px;
	}
	.departament{
		float: none;
		margin-top: 35px;
		display: block;
	
	}
	.location{
		display:block !important;
		margin-left:-3px;
		margin-top:5px
	}
	.job-filter-block a{
		display: block;
		width:fit-content;
	}
}
@media (max-width:575px) {
	.job-title{
		font-size: 22px !important;
	}
}
.jobFilterBlock {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 20px;
}
.jobFilterBlock .filterItem {
	margin-right: 22px;
}
.jobFilterBlock .filterItem select {
	padding: 12px;
	font-size: 20px;
	border-radius: 8px;
}
.jobsContainer {
	background: #fff;
	padding: 40px 55px;
	border-radius: 15px;
}
.jobsContainer .departmentName {
	font-size: 20px;
	background: #07979E;
	display: inline-block;
	margin: 20px 0px;
	color: #fff;
	font-weight: 400;
	padding: 8px 18px;
	border-radius: 12px;
	letter-spacing: 0.4px;
}
.jobsContainer .jobBlock {
	flex-direction: column;
	margin: 20px 0px;
}
.jobsContainer .jobBlock .jobTitle{
	font-size: 18px;
	color: #000;
	padding-right: 2px;
	border-bottom: 1px solid #000;
}
.jobsContainer .jobBlock .jobLocation {
	font-size: 16px;
	color: #C5C5C5;
}