/* GENERAL */
	/* body {background-color: rgb(240, 250, 255)} (το γαλάζιο του γραφίστα) */ 
	body {background-color: #d6e8f1}
	.white {color: White !important}
	.banner {background-color: #d9d9d9;text-align: center; display: flex; justify-content: center; align-items: center; margin: auto}
	.article_date {font-size: 12px; color: #727374; margin-top: 10px;font-weight: bold; font-family: Lato}
	.dotted_separator {height: 1px; width: 100%; margin:10px 0px; border-bottom: 2px dotted #707070}
	.dotted_vertical_separator {height: 100%; width: 1px; border-left: 2px dotted #707070}
	.test {border: 1px solid red}
	
	a {
		color: inherit;
		text-decoration: none; /* Optional: If you also want to remove the underline */
	}

	a:hover {
		color: #1f307a;
		text-decoration: none;
	}

.main_container .row {
	margin: auto;
}


/* TAGS */
	.tag {background-color: #002467; display: inline-block; color: White; padding: 1px 6px; font-family: Lato; font-weight: 700; font-size: 14px; text-transform: uppercase;}
	.overtitle {background-color: #144196; display: inline-block; color: White; padding: 1px 6px; font-family: Lato; font-weight: 500; font-size: 12px; text-transform: uppercase; margin-bottom: 8px}
	.homepage_tag {background-color: #626262; display: inline-block; color: White; padding: 1px 6px; font-family: Lato; font-weight: 700; font-size: 16px; margin-right: 4px; margin-bottom: 6px;}

/* TOP BAR */
	.topbar_container {max-width: 1280px !important; margin: auto;}
	.topBar {width: 100%; height: 68px; background-color: #002467;	color: White}

.main_container {
	max-width: 1084px !important;
	margin: auto;
	padding: 20px 20px 0px 20px;
}

/* Hamburger button styles */
	.hamburger-icon {display: flex; flex-direction: column; justify-content: space-between; width: 47px; height: 24px; cursor: pointer}
	.hamburger-menu .menu {display: none; position: absolute; right: 0; background-color: #fff; z-index: 1000; width: 200px; box-shadow: 0px 0px 10px rgba(0,0,0,0.2)}
	.hamburger-menu.active .menu {display: block}

.bar {width: 100%; height: 4px; background-color: #fff;}
  
/* Menu styles */
  	.menu {display: none; list-style: none; padding: 20px; background-color: #f9f9f9; position: absolute; top: 60px; right: 20px}
	.menu.active {display: block}


.topBarSectionLink {
    overflow: visible;
    height: 22px;
    line-height: 20px;
    text-align: left;
    font: normal normal 900 18px/20px Lato;
    font-size: 18px;
    color: rgba(255,255,255,1);
    text-transform: uppercase;
	letter-spacing: 0px;
	float: left
}


/* MAIN ARTICLE */
.main_article_overtitle {
	font-family: Lato; font-weight: 900; font-size: 19px; letter-spacing: 0px; margin-bottom: 10px;
	text-transform: uppercase; 
}
.main_article_title {
	text-align: left; font: normal normal 900 40px/46px Merriweather; letter-spacing: 0px; color: #626262; line-height: 47px
}

#mainArticleTitle {
    flex-shrink: 0;
    flex-basis: 370px;
}


.top_article {font: normal normal 700 18px/20px Merriweather; letter-spacing: 0px; color: #000000; padding-top: 10px}

/* ELEMENTS TO HIDE IN WIDE FORMAT */
#banner_300x250_2_under_popular {display: none}
#banner300x250_3 {display: none}
.sm_moreNews_tag {display: none}

/* --- HOMEPAGE > DEAL MAKER --- */
	#deal_maker {
		width: 100%; margin: 50px auto 90px auto;
	}
	.deal_maker_narrow {
		display: none;
		color: White; 
		text-align: center;
		background-color: #002467;
		font-family: 'Times New Roman', Times, serif;
		font-size: 30px;
		font-weight: 500;
		height: 46px;
		line-height: 46px;
	}
	.dealMaker_container {
		position: relative;
		width: 100%;
		height: 200px; /* or whatever height you need */
		padding-left: 100px; /* to make space for the arrow image */
	}
	.dealMaker_blueArrow {
		position: absolute;
		left: 0;
		height: 242px;
		z-index: 1;
	}
	.dealMaker_textContent {
		background-color: #74A1F7;
		padding: 18px 16px 20px 76px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* add a subtle shadow */
		width: 852px; /* adjust as needed */
		position: absolute;
		right: 0;
		color: White;
		font-size: 32px;
		font-family: Lato;
		line-height: 41px;
		height: 242px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	/* BANNER 970x250 #1 */
		#banner300x250_1 {
			display: none;
		}
		#banner970x250_1 {
			width: 970px; height: 250px; margin-top: 90px; margin-bottom: 40px
		}

		@media (min-width: 940px) and (max-width: 1000px) {
			#banner970x250_1 {
				margin-top: 60px
			}
		}	

		@media (max-width: 939px) {
			#banner970x250_1 {
				display: none;
			}
			#banner970x250_2 {
				display: none;
			}
			#banner300x250_1 {
				display: block;
				margin: 50px auto;
				display: flex;
			}
			#banner300x250_3 {
				display: block;
				display: flex;
				margin: 60px auto 30px auto;

			}
		}	
	/* Media queries for screens 769-1080px */
	@media (min-width: 769px) and (max-width: 1080px) {
		#deal_maker {
			margin-bottom: 0px
		}
		.dealMaker_container {
			display: grid; /* Turn the container into a grid container */
			grid-template-columns: auto 1fr; /* Define two columns: the image takes the space it needs, the text takes the rest */
			gap: 10px; /* Optional: space between the image and text */
		}

		#image_arrow {
			grid-column: 1; /* Place in the first column */
			width: auto; /* Allow it to adjust based on the image */
		}

		.dealMaker_blueArrow {
			display: block; 
			height: 100%; /* This will now respect the height of its container */
			width: auto;
		}

		.dealMaker_textContent {
			grid-column: 2; /* Place in the second column */
			width: auto;
			font-size: 2.7vw;
			line-height: 3.7vw;
			margin-left: 10%;
			padding-left: 7%;
			height: auto;
			min-height: 200px;
			display: flex;
			flex-direction: column;
			justify-content: center;    }
	}
	/* Media queries for screens 640-768px */
	@media (min-width: 640px) and (max-width: 768px) {
		.dealMaker_container {
			display: grid; /* Turn the container into a grid container */
			grid-template-columns: auto 1fr; /* Define two columns: the image takes the space it needs, the text takes the rest */
			gap: 10px; /* Optional: space between the image and text */
		}

		#image_arrow {
			grid-column: 1; /* Place in the first column */
			width: auto; /* Allow it to adjust based on the image */
		}

		.dealMaker_blueArrow {
			display: block; 
			height: 100%; /* This will now respect the height of its container */
			width: auto;
		}

		.dealMaker_textContent {
			grid-column: 2; /* Place in the second column */
			width: auto;
			font-size: 3vw;
			line-height: 4.2vw;
			margin-left: 10%;
			padding-left: 10%;
			height: 200px;
		}
	}
	/* Media queries for screens below 640px */
	@media (max-width: 639px) {
		.dealMaker_blueArrow {
			display: none; 
		}
		.deal_maker_narrow {
			display: block; 
			height: 50px;
		}

		.dealMaker_textContent {
			font-size: max(4.2vw, 22px);
			line-height: max(5.6vw, 26px);
			height: auto;
			width: auto;
			padding: 20px;
		}

		.dealMaker_container {
			width: auto;
		}
	}




.article_left_title {
	font: normal normal bold 26px/34px Merriweather, Times, serif;
	margin: 10px 0px;
}

.article_left_summary {
	font: normal normal normal 16px/20px Lato;
}

.section_title {
	font: normal normal bold 24px/50px Lato;
	letter-spacing: 0px;
	color: #726E6E;
}



.article_normal_title {
	font: normal normal 700 18px/20px Merriweather, Times, serif;
}
.article_normal_summary {
	font: normal normal normal 13px/16px Lato;
}

.articles_right {
	padding-left: 0px
}

.popular_number {
    border: 2px solid #002467;
    font-family: Lato;
    font-size: 24px;
	font-weight: bold;
	color: #002467;
    width: 41px;
    height: 41px;
    text-align: center;
    float: left;
    margin-right: 16px;
}

.popular_details {
    overflow: hidden; /* This will clear the float from the .popular_number */
}

.popular_article_title {
    font: normal normal 700 18px/20px Merriweather;
    letter-spacing: 0px;
    color: #000000;
	margin-top: 8px;
	margin-bottom: 24px;
	padding-right: 5px
}


/* --- DEAL OF THE DAY --- */
	.deal_of_the_day {margin-top: 40px}
	.deal_of_the_day .header {font: normal normal normal 60px/60px Arial; letter-spacing: 0px; color: #002467; margin-bottom: 50px; margin-left: 20px}
	.deal_of_the_day .bg {
		background-color: #626262;
		min-height: 250px;
		margin: 20px;
		display: flex; justify-content: flex-end; align-items: center; position: relative;
		
	}
	.deal_of_the_day .right-content {
		padding: 0 5%;
		width: 45%
	}
	.deal_of_the_day .title {
		font-family: Merriweather;
		font-size: 26px;
		font-weight: 400;
		line-height: 34px;
		color: #ffffff;
	}
	.deal_of_the_day .summary {
		font: normal normal normal 16px/20px Lato;
		color: #ffffff;
		/* width: 392px; */
		margin-top: 10px
	}
	.deal_of_the_day .left-image {
		position: absolute; /* Absolute position so it can overlay */
		left: 20px;
		bottom: -30px;
		width: 55%;
		height: 125%; 
		z-index: 2;
		object-fit: cover; /* This will ensure that the image covers the given dimensions without distortion */
	}


#banner970x250_2 {
	width: 970px; height: 250px; margin-top: 90px; margin-bottom: 40px
}



/* --- MORE NEWS --- */
#more_news {
	background-color: White; 
	width: 100%;
	margin-top: 30px;
	margin-bottom: 30px;
	padding: 20px
}
#more_news .image-container {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Ensures that any part of the image outside the container is hidden */
    position: relative;
}
#more_news .image-container img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

#more_news .date_tag, #more_news .photo, #more_news .text  {
	padding-left: 0px
}
@media (max-width: 767px) {
	.sm_moreNews_tag {
		display: block;
	}
}

@media (max-width: 575px) {
	.sm_moreNews_tag {
		margin-top: 10px
	}
}

/* --- FOOTER --- */
.footer {
	padding-top: 12px;
	padding-bottom: 12px;
	width: 100%;
	background-color: #002467;
	color: white;
	max-width: 1280px;
	margin: 20px auto 0px auto;
}

.footer a {
	color: White
}

.inner_footer {
	max-width: 1044px;
	margin: auto;
	display: flex;
	align-items: baseline;
	text-align: center;
}
.dont_miss {
	font: normal normal bold 22px/30px Lato;
	padding-left: 18px;
	padding-right: 12px;
}
.dont_miss_form {
	background-color: #002467; color: white;
	font: normal normal normal 20px/30px Lato;
	border: 0px;
	border-bottom: 1px solid white;
	width: 100%;
	margin-right: 12px;
}
input[type="text"].dont_miss_form:focus {
    outline: none;
	border: 0px;
	border-bottom: 1px solid white;
	color:#d9d9d9
}


@media (min-width: 992px) {
    .topBar .row {
        flex-wrap: nowrap;
    }

}

@media (max-width: 991px) {
    #logo_big {
        padding-bottom: 20px;
    }
	.deal_of_the_day .header {
		font-size: 2
	}


}

@media (max-width: 1080px) {
	.deal_of_the_day .title {
		font-size: clamp(20px, 2.2vw, 100%);
		line-height: clamp(24px, 2.7vw, 100%);
	}

	.deal_of_the_day .right-content {
		padding: 0% 4% 0% calc(max(2%, 10px));
		width: 50%
	}
}






/* Απόκρυψη κεντρικού άρθρου στην αρχική μορφή κάτω από τα 1080px και εμφάνιση σε συμβατικό layout*/
@media (max-width: 1080px) {
	#main_article_1080px {
		display: none !important;
	}
	#main_article_narrow {
		display: block !important;
	}

	.main_article_overtitle {
		margin-top: 40px
	}

	/* Deal of the day */
		.deal_of_the_day .left-image {
			padding-right: 10%
		}

}


@media (min-width: 1081px) {
	#main_article_narrow {
		display: none;
	}
}

#main_article_narrow {
	margin-top: -40px;
	margin-bottom: 30px
}

@media (max-width: 767.98px) { /* Bootstrap's breakpoint for sm devices */
    #logo_banner728 {
        display: none;
    }

	.main-article-image {
		width: 100%; object-fit: cover;
        height: auto !important; /* overriding the inline style */
        position: static !important; /* overriding the inline style */
    }

	.main_article_overtitle {
		margin-top: 0px
	}

	#main_article_narrow {
		margin-bottom: 0px
	}
}

@media (min-width: 768px) {
	.main-article-image {
		width: 100%; height: 100%;
		object-fit: cover; 
		position: absolute; 
		top: 0; left: 0;
	}
}


@media (max-width: 630px) {
	#dealOfTheDay_image {
		display: none;
	}
	.deal_of_the_day .right-content {
		width: 100%
	}
	.deal_of_the_day .header {
		font-size: 9.1vw;
		margin-bottom: 0px
	}

	.deal_of_the_day .bg {
		min-height: auto;
		padding: 20px
	}
}
		
.menu-overlay {
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%; /* adjust the height so that it covers the rest of the viewport */
    background-color: rgba(0, 36, 103);
    display: none;
    z-index: 10;
}

.menu-overlay.active {
    display: flex;
}

.menu-overlay .overlay-menu {
    list-style-type: none;
	margin-top: 64px
}

.menu-overlay .overlay-menu li {
    margin: 10px 0;
}

.menu-overlay .overlay-menu a {
    color: white;
    text-decoration: none;
    font: normal normal 900 24px/30px Lato;
    color: rgba(255,255,255,1);
}

.topBarSectionLink a:hover {
	color: rgb(223, 243, 255)
}

.hamburger-menu.active .bar1 {
    transform: rotate(45deg) translate(7px, 7px);
}
.hamburger-menu.active .bar2 {
    opacity: 0;
}
.hamburger-menu.active .bar3 {
    transform: rotate(-45deg) translate(7px, -7px);
}


.top-bar {
    height: 68px;
    background-color: rgba(0, 36, 103);
    position: fixed; /* Makes the top bar stick to the top */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* This ensures it's on top of other elements */
	align-items: center;
}

.close-menu {
    background-color: transparent;
    border: 0px;
    font-size: 32px; 
    color: White;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%); /* Centers the button vertically */
}

.bar {
    transition: all 0.3s ease; /* This applies a 0.3-second transition to all properties */
}


#closeMenu {
	color: white; font-size: 40px; cursor: pointer
}





/* NEWS SECTION 1 */
.news_section {
	width: 100%; padding-top: 20px; padding-bottom: 18px; background-color: White;
}

#news_section_1 {
    box-sizing: border-box; /* This ensures padding and border are included in the width calculation */
}

@media (max-width: 768px) {
	#most_popular {
		margin-top: 20px;
		padding: 20px 20px 0px 20px;
		border-top: 20px solid #d6e8f1;
	}

	#tags_and_banner {
		margin-top: 20px;
		padding: 20px;
		border-top: 20px solid #d6e8f1;
	}

	#news_section_1 {
		padding-bottom: 0px
	}
	#banner_300x250_2_inside_popular {
		display: none
	}
	#banner_300x250_2_under_popular {
		display: block;
		margin-top: 30px;
		display: flex
	}
}


@media (max-width: 838px) {
	#banner_300x600 {
		display: none
	}
}





/* ------------------------------- ARTICLE PAGE -------------------------------*/
.article_container {
	background-color: white;
	margin-top: 10px;
	padding: 20px;
}

.article_top_section {
	padding: 28px 85px;
}

@media (max-width: 768px) {
	.article_top_section {
		padding: 0px 20px;
	}
	#time_to_read {
		height: 40px !important;
	}
	#after_time_to_read {
		height: 14px;
	}
}

.article_overtitle {
	font-family: Lato; font-weight: 900; font-size: 19px; letter-spacing: 0px; margin-bottom: 10px;
	text-transform: uppercase;
}

.article_title {
	font: normal normal bold 44px/50px Merriweather;
	letter-spacing: 0px;
	color: #626262;
	margin-bottom: 10px
}

.photoLegend {
	text-align: center; margin-top: 8px; font-size: 13px
}

@media (max-width: 500px) {
	.article_title {
		font-size: 8.5vw;
		line-height: 10vw;
	}

	#time_to_read {
		height: 40px !important;
	}

}

.article_summary {
	font: normal normal normal 18px/24px Lato;
	letter-spacing: 0px;
	color: #000000;
}

.author_time_listen {
	font: normal normal bold 14px/24px Lato;
}

.time_to_read {
	font: normal normal bold 10px/16px Lato;
	color: #727374
}

#play_button {
	width: 65px; margin-left: 20px
}

@media (max-width: 810px) {
	#play_button {
		width: 50px;
		margin-top: 6px
	}
}


@media (max-width: 580px) {
	#play_button {
		width: 40px;
		margin-top: 6px
	}
}

#article_body {
	padding: 30px 70px
}

#article_body p {
	padding: 4px 66px
}

@media (max-width: 1040px) {
	#article_body {
		padding: 30px 40px
	}
	
	#article_body p {
		padding: 4px 26px
	}
}

@media (max-width: 660px) {
	#article_body {
		padding: 30px 10px
	}
	
	#article_body p {
		padding: 4px 28px
	}
}

@media (max-width: 360px) {
	#article_body {
		padding: 30px 00px
	}
	
	#article_body p {
		padding: 4px 16px
	}
}

#article_body blockquote {
	font: normal normal bold 22px/30px Lato;
	color: #002467;
	padding: 20px 0px 10px 0px;
	border-top: 1px dashed #000000;
	border-bottom: 1px dashed #000000;
	margin: 30px 0px
}

#read_also {
	background-color: White;
	margin-top: 40px;
	margin-bottom: 10px;
	padding: 20px;
}

#read_also .title {
	font: normal normal 900 28px/32px Lato;
	margin-bottom: 20px;
}

#read_also .article_title {
	font: normal normal bold 14px/18px Merriweather;
	margin-bottom: 4px
}

.articleTags {
	margin: 20px 0px
}


/* ------------------ ΣΕΛΙΔΑ ΚΑΤΗΓΟΡΙΑΣ ------------------ */
.category_title {
	font: normal normal 900 32px/30px Lato;
	margin-bottom: 20px
}

.in_brief {
	font: normal normal bold 24px/30px Lato;
	color: #726E6E;
}

.brief_title {
	font: normal normal bold 18px/20px Lato;
	margin-bottom: 6px
}

.login {
	font-family: Lato;
    font-size: 22px;
}



.edit_button {
	background-color: #3870ab;
	font-size: 18px;
	color: White;
	position: fixed;
    top: 10px;
    right: 10px;
	padding: 4px 18px;
    z-index: 1000;
	cursor: pointer;
}

.edit_button:hover {
	background-color: #3a8ce2;
}

.main_article_photo {
	width: 100%; height: 380px; 
	object-fit: cover;
	margin-bottom: 10px
}

.article_main_photo {
	width: 100%;
	max-height: 600px;
	object-fit: cover;
}


.category_secondary_article_photo {
	width: 100%; margin-bottom: 10px; height: 240px; object-fit: cover;
}

.category_morenews_photo {
	width: 100%; margin-bottom: 10px; height: 180px; object-fit: cover;
}



/* ------------------- PAGINATION ------------------- */
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    list-style: none;
    padding: 0;
}

.pagination a, .pagination span {
    display: block;
    padding: 10px 15px;
    margin: 0 5px;
    text-decoration: none;
    color: #0a4380;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.pagination a:hover {
    background-color: #007bff;
    color: #fff;
}

.pagination a.active {
    background-color: #002467;
    color: #fff;
    border-color: #007bff;
}

.pagination a.disabled, .pagination span {
    pointer-events: none;
    color: #6c757d;
    background-color: #fff;
    border-color: #dee2e6;
}