/*
Theme Name:   ForgotTheTen-Theme
Description:  Shu subdomains themes/twentytwentyfive/
Author:       Webmaster
Author URI:   https://www.shu.bg/
Template:     twentytwentyfive
Version:      1.0.0
Text Domain:  ShuTheme
Main color: #3E0530
Other color: #830f56
*/

@font-face {
  font-family: El Messiri;
  font-style: normal;
  font-weight: 400;
  src: url(https://forgottheten.com/wp-content/themes/shu-theme/assets/fonts/el-messiri/el-messiri-v24-cyrillic_latin-500.woff2);
}
body{
	background-color: #1a1a1a ;
	font-family: 'El Messiri';
	font-size: 1rem ;
}
a {
	text-decoration: none !important;
}
a:focus {
    outline: none !important;
	opacity:0.7; 
}
a:active{
	text-decoration: none;
}
hr {
	background-image: radial-gradient(
    closest-side,
    rgb(171,171,171, 0.5),
    rgb(171,171,171, 0) 100%) !important;
	background-position: 50% ;
	border: 0 !important;
	box-sizing: border-box;
	height: 6px;
	margin: 1.35em auto;
	max-width: 100% !important;
	position: relative; 
}

/* Outer & Inner */ 
.outer {
	height: 100%;
	width: 100%; 
}
.inner {
	align-items: center !important;
	display: flex !important;
	left: 0;
	margin-top:2.8% !important;
	position: absolute;
    top: 0;
    width: 100%;
	z-index: 2;
}

/* Opacity */ 
.opacity {
	 position: relative; 
}
.opacity::before { 
	background-color: rgba(0, 0, 0, 0.5);
	bottom: 0; 
    content: '';
	left: 0;
    position: absolute; 
	right: 0;
    top: 0; 
    z-index: 0;
} 
.transparent {
	 opacity:0.8;
}

/* Zoom image on hover */
.image img{
	filter: grayscale(50%);
	transition: transform .5s ease;
}
.image a:hover img {
	filter: grayscale(1%);
	-ms-transform: scale(1.1); /* IE 9 */
	-webkit-transform: scale(1.1); /* Safari 3-8 */
	transform: scale(1.1); 
}

/* Black & White effect */
.grayscale {
	filter: grayscale(100%);
}

/* Menu */
#mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle.mega-menu-open + #mega-menu-max_mega_menu_1{
	margin-left: 85%;
}

#mega-menu-wrap-max_mega_menu_1:has(.mega-menu-open) #mega-menu-max_mega_menu_1[data-effect-mobile^="slide_right"] + button.mega-close{
	left: auto !important;
	right: 20px !important;    
} 

/* Polylang */
.lang-item {
	display: none;
}
.polylang_langswitcher img{
	width:32px !important;
	height: auto !important;
}
.polylang_langswitcher li{
	display: block;
}

/* Query Loop */

.loop ul li{
	display: inline-block !important;
	margin: 1% !important;
	opacity: 1 !important;
	width: 22% !important;
	
}
.loop ul li img{
	width: 100%;
}

/* Other */
.logo img {
	width: 50% !important;
}
.btn {
	background-color: transparent !important;
	border: 1px solid #3498db !important;
	box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6) !important;
	color: #3498db !important;
    cursor: pointer !important;
	font-size: 1.5em !important;
	height: 50px !important;
    width: 200px !important;
}	

/* Fornt page button */	
.btn-inner {
	display: flex;
	left: 0;
	margin-top:30% !important;
	position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

/* News */
.post img {
	
	height: auto;
}
.attachment-thumbnail {
	height: 15rem !important;
	width: 15rem !important;
	object-fit: cover ;
}
.alignleft {
	float: left !important;
	margin-right: 15px !important; 
}

/* Video */
.head-container{
	position: relative;
	width: 100%;	
}
.title-inner {
	background: #999;
	display: flex;
	left: 0;
	margin-top:70% !important;
	opacity: 0.8;
	position: absolute;
    top: 0;
	width: 100%;
    z-index: 3;
}
.active {
	background-color: #ffffff !important;
	border: 1px solid #222222 !important;
	color: #222222 !important; 
}
.inactive {
	background-color: #222222 !important;
	border: 1px solid #222222 !important;
	color: #fff !important;
}
.video-btn {
	background-color: #222222 ;
	border: 1px solid #222222;
	color: #fff;
	font-family: 'El Messiri';
	font-weight: 500;
	height: 32px !important; 
	text-transform: uppercase;
	width: 150px !important;	
}
button.video-btn:hover{
	background-color: #ffffff !important;
	color: #222222 !important;	
} 
#btn-live{
	background-color: #222222 ;
	border: 1px solid #222222;
	color: #fff;
}
#btn-live:hover {
    background-color: #ffffff;
	color: #222222;
}
#live{
	display: none;
}
#official{
	display: none;
}

/* Band & Members */
.band img{
	filter: grayscale(50%);
	transition: transform .5s ease;
	border: thick double #32a1ce;
}
.band a:hover img {
	filter: grayscale(1%);
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1); 
	transform: scale(1.1); 
} 

/*Social Links */
ul.cnss-social-icon li {
	margin-left: 5% !important;
}


/* Newsletter */
.tnp-subscription-minimal input.tnp-submit{
	width: auto !important;
}
.tnp-subscription-minimal form{
	border: thick !important;
	border-color: #1a1a1a !important;
	text-align: left !important;
}

 time{
	font-size: 12px !important;
	color: #fff !important;
	font-weight: 400;
	text-transform: uppercase;
}
.wp-block-navigation-item__label:hover{
	padding: 5px !important;
	background-color:#fff;
	color: #000;	
}
.wp-block-navigation-item__label.active{
	padding: 10px !important;
	background-color:#fff;
	color: #000;	
}
.wp-block-query  .page {
	width: 100% !important;
}
@media screen and (min-width: 344px) and (max-width: 1024px) {

 
	#mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle.mega-menu-open + #mega-menu-max_mega_menu_1{
		margin-left: 50% !important;
		width: 100% !important;
	}
	.outer {
    height: auto !important;
	}
	.loop ul li{
		display: contents !important;
		margin-top: 2% !important;
		opacity: 1 !important;
		width: 22% !important;	
	}
	.lang-menu{

		margin-right: 10% !important;
		padding: 0 0 0 0 !important;
	}
	.polylang_langswitcher img{

		padding: 15 !important;

	}
	.flex-control-nav{
		display: none !important;
	}
	.wp-block-latest-posts.is-grid li {

		width: 100% !important;
		height: auto!important
	}
	.attachment-thumbnail {
	height: auto !important;
    width: 100% !important;

	}
	.post img {
		
		margin-bottom: 2%;
		width: 100% !important;
		
	}
	iframe {
		
		width: 100% !important;
		        
	}
}

