:root {
    --container-w: 1520px;
	--container-mob: 100%;
}

/* container */
.container {
    width: var(--container-w);
    margin: 0 auto;
}
.basic-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.basic-main-grid {
    display: grid;
    grid-template-columns: 237px auto 237px;
    grid-gap: 15px;
}
.basic-top-date {
    background: #111;
    padding: 10px 0;
    color: #fff;
}
.top-date-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.basic-social ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding-left: 0;
    margin: 0;
    gap: 15px;
    text-transform: uppercase;
}
.basic-site-description :is(h1,h2,h3) {
    font-size: 20px;
}
.basic-grid-holder {
    display: grid;
}
.grid-item-3 {
    grid-template-columns: repeat(3, calc(100% * 1 / 3 - 15px));
    grid-gap: 15px;
}
.grid-item-4 {
    grid-template-columns: repeat(4, calc(100% * 1 / 4 - 15px));
    grid-gap: 15px;
}
.grid-item-5 {
    grid-template-columns: repeat(5, calc(100% * 1 / 5 - 15px));
    grid-gap: 15px;
}
.grid-item-6 {
	grid-template-columns: repeat(6, calc(100% * 1 / 6 - 15px));
    grid-gap: 15px;
}
.grid-item-8 {
	grid-template-columns: repeat(8, calc(100% * 1 / 8 - 15px));
    grid-gap: 15px;
}
.basic-top-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
	padding-bottom: 10px;
    border-bottom: 2px solid #5e5e5e;
}
.basic-footer-social {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
}
.basic-single-grid {
    display: grid;
    grid-template-columns: 292px auto;
    grid-gap: 20px;
	background: linear-gradient(to bottom, #202223, #1f2021);
	border: 1px solid #2b2c2f;
	margin-top: -15px;
	padding: 40px;
}
/* -------------------- close ----------- */
.banner-before-player, .banner-after-player, .ad-float-center, .banner-float-left, .banner-float-right {display:none !important;}
.banner-layout {
	/*display:none !important;*/
	list-style: none;
	margin-bottom: 15px;
	li {
		position: relative;
		margin-bottom: 0;
		.widget-title {
			display:none;
		}
	}
}
/* New Banner Layout */
.banner-widget-center,
.banner-before-player,
.banner-after-player {
    display: grid;
    grid-template-columns: repeat(2, calc(100% * 1 / 2 - 5px));
    grid-gap: 10px;
}

.banner-grid {
/* 	display:grid;
    grid-template-columns: 237px auto 237px;
	grid-gap: 15px; */
    list-style: none;
	margin-bottom: 15px;
	li {
		position: relative;
		margin-bottom: 0;
		.widget-title {
			display:none;
			position: absolute;
			border-bottom-right-radius: 10px;
			background: #323232;
			color: #959595;
			padding: 3px 10px;
			font-size: 14px;
		}
	}
}
.banner-layout li {
/*     margin-bottom: 15px; */
}
.banner-widget-center li img,
.banner-before-player li img,
.banner-after-player li img{
	width: 100%;
}
.banner-layout li img {
    height: 100% !important;
}
.banner-widget-center li {
/*     height: 184px; */
}
.banner-float-left {
    position: fixed;
    top: 10%;
    left: 0;
}
.banner-float-right {
    position: fixed;
    top: 10%;
    right: 0;
}
span.close-ad {
    position: absolute;
    display: block;
    color: #fff;
    padding: 3px 5px;
    background: red;
    top: 0;
    left: 0;
    z-index: 999999;
    cursor: pointer;
}

/* Mobile */
.basic-mobile-header {
	display: none;
}
.abs-mob-feature {
	display: none;
}
.dropdown-cat {
	display:none;
}
#mob-search {
	display:none;
}
.basic-mob-footer {
	display:none;
}
.mob-grid-2 {
    grid-gap: 15px;
}
.basic-home-text {
	display:grid;
	grid-template-columns: repeat(3, calc(100% * 1/3 - 10px));
	grid-gap: 13px;
}
.home-text-item {
    padding: 40px;
    border: 1px solid #343537;
    border-bottom: 2px solid transparent;
    position: relative;
	color: #fff;
	&:after {
		content: '';
		position:absolute;
		bottom: -2px;
		left: 0;
		width: 100%;
		height: 2px;
		background: linear-gradient(to right, #ff1b1b 18%, #003898 85%);
	}
	ul {
		margin-left: 0;
	}
}
@media screen and (max-width: 768px) {
	main {
		padding-top: 35%;
	}
	.container {
		width: var(--container-mob);
	}
	.basic-home-text {
		grid-template-columns: 100%;
	}
	.basic-head {
		display:none;
	}
	
	.bar-left .banner-layout,
	.bar-right .banner-layout{
		display:grid;
		grid-template-columns: repeat(2, calc(100% * 1/2 - 10px));
		grid-gap: 10px;
		justify-content: center;
	}
	
	.basic-mobile-header {
		position: fixed;
		top:50px;
		left:0;
		width:100%;
		background:#1e1e1e;
		z-index: 99999;
		display: flex;
        justify-content: space-between;
        align-items: center;
		padding: 10px;
	}
	.basic-top-date {
		position: fixed;
        top: 0;
        background: #141516 !important;
        width: 100%;
        padding: 10px;
        z-index: 999999;
	}
	.mob-btn-group {
        /*width: 70px;*/
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 10px 0;
	}
	.basic-social ul li:first-child {
		display:none;
	}
	.mob-logo {
		
	}
	.basic-editor-pick {
		padding: 0 10px 25px 10px;
		background-position: center center;
  		background-size: cover;
	}
	#wpcategorieswidget-4,
	#wpcategorieswidget-5 {
		list-style:none;
		select {
		  width: 100%;
		  border-radius: 15px;
		  background: #3d3d3d;
		  border: 1px solid #525252;
		  padding: 5px 15px;
		  color: #fff;
		}
	}
	.abs-mob-feature {
		display:block;
        background: #2c2b2b;
        padding-top: 15px;
        padding-bottom: 15px;
        position: fixed;
		padding-top: 35%;
        width: 100%;
        height: 100%;
		left: -100%;
		transition: 0.2s ease-out;
	}
	.abs-mob-feature.show {
		left: 0;
		transition: 0.2s ease-in;
		z-index:999;
	}
	.mob-menu-icon {
		padding: 3px;
		cursor: pointer;
	}
	.basic-main-grid {
		padding: 0 15px;
	}
	ul#mobile-menu {
		margin-left: 0;
		list-style: none;
		padding-left: 0;
		margin-bottom: 0;
	}
	ul#mobile-menu li {
		padding-left: 10px;
		padding-right: 10px;
	}
	ul#mobile-menu li a {
		text-decoration: none;
		color: #fff;
		display:block;
		padding: 10px 15px;
	}
	.basic-footer {
		padding-left: 15px;
		padding-right: 15px;
	}
	#mob-search {
        justify-content: center;
        align-items: center;
        padding: 10px;
        background: #292727e3;
        gap: 15px;
        position: relative;
		transition: 0.3s ease;
		margin-top: 31%;
	}
	#mob-search.open {
		display:flex;
		transition: 0.3s ease;
	}
	.basic-main-grid {
		grid-template-columns: auto;
	}
	.mob-grid-2,
	.grid-item-4,
	.grid-item-8 {
		grid-template-columns: repeat(2,calc(100% * 1 / 2 - 8px));
		padding: 0 15px;
        justify-content: center;
	}
	.basic-grid-holder.grid-item-3 {
		display:block;
		padding: 0 15px;
	}
	.basic-grid-sq {
		margin-bottom: 15px;
	}
	.grid-left img {
		height: 100%;
	}
	.basic-single-grid {
		grid-template-columns: auto;
	}
	.single-grid-feature-img {
		text-align: center;
	}
	.dropdown-cat {
		display:block;
	}
	.basic-mob-footer {
		display:block;
		position: fixed;
		bottom: 0;
		background: #202122;
		width: 100%;
		z-index:999;
		.fix-list {
			
		}
	}
	.basic-copy {
	  margin-bottom: 25%;
	}
	.fix-list {
		display: grid;
		grid-template-columns: repeat(3, calc(100% * 1 / 3 - 15px));
		justify-content: center;
		align-content: center;
		list-style: none;
	}
	.fix-list li a {
		height: 55px;
	}
	.fix-list li:first-child {
		border-left: 1px solid #161718;
	}
	.fix-list li {
		padding: 20px;
		border-right: 1px solid #161718;
	}
	li.current-fix {
		background: linear-gradient(to right, #f21c21 0%, #b02441 100%);
	}
	.fix-list li a {
		position:relative;
		display: grid;
		grid-template-columns: auto;
		align-content: center;
		justify-items: center;
		text-decoration: none;
		row-gap: 5px;
	}
	.fix-list li span {
		font-size: 13px;
		color:#fff;
		display:block;
		text-align:center;
        margin-top: 5px;
	}
	.fix-list li:hover {
		span {
			color:red;
		}
	}
	.basic-footer-social {
		display:none;
	}
	.basic-top-footer {
		justify-content:center;
	}
	.banner-grid {
		display:block;
		padding: 0 15px;
	}
	.banner-widget-left, .banner-widget-right {
		display: grid;
		grid-template-columns: repeat(2, calc(100% * 1 / 2 - 10px));
		grid-gap: 10px;
		justify-content: center;
	}
	.banner-widget-center li {
		height:auto !important;
	}
	.banner-widget-center li img {
		height: auto !important;
	}
	.contact-grid {
		display: grid;
		grid-template-columns: 100%;
		gap: 15px;
		padding: 0 15px;
	}
	.contact-icon {
		display: grid;
		grid-template-columns: repeat(3, calc(100% * 1 / 3 - 10px));
		grid-gap: 10px;
		justify-content: center;
	}
	.contact-item-icon {
		margin-bottom: 0;
		padding: 35px 0;
	}
	.banner-float-left,
	.banner-float-right {
		transform:scale(0.5);
	} 
	.banner-float-left {
		transform-origin:left;
	}
	.banner-float-right {
		transform-origin: right;
	}
	.banner-widget-center, .banner-before-player, .banner-after-player {
		grid-template-columns: auto;
		grid-gap:0;
		row-gap: 10px;
	}
	.ad-float-center {
		top: 30% !important;
	}
	span.close-ad {
		padding: 3px 15px;
		font-size: 40px;
	}
	.ad-float-center span.close-ad{
		font-size: 18px;
		padding: 3px 10px;
	}
}

