/*
 Theme Name:   DeMa Education Theme
 Theme URI:    https://www.dema-online.com
 Description:  DeMa Education's custom theme for GeneratePress
 Author:       PG
 Template:     generatepress
 Version:      1.0
*/
/* ***
Style.css updated on 02 Jan 2026
******************************** */

/* ****************** */
/* GLOBAL COLOUR VARS */
/* ****************** */

:root {
	--dema-blue: #033693;
	--dema-light-blue: #e5eefe;
	--dema-medium-blue: #7bb1d6;
	--dema-dark-blue: #03016b;
	--dema-pink: #fc06b9;
	--dema-light-pink: #f790bf;
	--dema-light-grey: #e5e5e5;
	--dema-dark-grey: #a0a0a0;
	--dema-white-smoke: #f5f4f4;
	--dema-blue-opp: #936003;
}

/* **************** */
/* GLOBAL SELECTORS */
/* **************** */

/*** WORKAROUNDS and HACKS ***/ 
/* To fix scroll-up button when responsive, eg in Safari */
html {
	scroll-behavior: unset !important;
}
/* To fight against bloody S@#!?*#s... */
.dema-smoke-wall span.dsw1, .dema-smoke-wall em, .dema-smoke-wall b {
	display: none;
}
/* To prevent rounded corners in Search Box on some devices */
input[type="search"] {
	-webkit-appearance: none !important;
	border-radius: 0 !important;
}

/*** LAYOUT ***/
/* No white space between Header and Content */
.separate-containers .site-main {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/*** TOP BAR ***/
.top-bar {
	background-image: linear-gradient(to right, var(--dema-dark-blue), var(--dema-blue), var(--dema-pink));
}
/* PolyLang Switcher wrapper [Wrapper created by a function in functions.php] */
.langswitcher-wrapper {
	margin-bottom: -5px;
}
.langswitcher-wrapper a {
	padding: 7px;
	color: var(--dema-blue);
	text-decoration: none;
	border-radius: 5px;
	background-color: var(--base-3);
}
.langswitcher-wrapper a:hover {
	color: var(--base-3);
	text-decoration: none;
	background-color: var(--dema-blue);
}

/*** HEADER ***/
/* Site Title */
.site-branding {
	margin-left: -20px; /*Title & Description closer to Logo*/
	padding-right: 20px; /*More white space when responsive in iPad... It doesn't seem to be necessary because the rule below seems enough, but just in case...*/
} 
.main-title, .main-title a {
	font-size: 30px; /*38px*/ /*Because previous Logo Size was 130px*/
	font-weight: 700;
	padding-right: 20px; /*More white space when responsive in iPad...*/
}
/* Site Description (below Site Title) */
.site-description {;
	font-size: 18px; /*20px*/
	font-weight: 400;
}
/* Doesn't show WeChat QR Code on Chinese Header in such mobile devices as iPads */
@media only screen and (max-width: 1114px) {
	.header-widget {
		display: none;
	}
}
/* DeMa Logo flies above Site Title and Description in very small devices .., plus a little bit of formatting ...*/
@media only screen and (max-width: 480px) and (orientation: portrait) {
	.site-branding-container {
		flex-direction: column;
	}
}

/*** LINKS & NAVIGATION ***/
a {
	font-weight: 600;
	text-underline-offset: 5px;
}
/** MAIN MENU **/
/* MAIN MENU links effect */
.main-navigation .menu > .menu-item > a::after {
	content: '';
	position: absolute;
	top: 5px;
	right: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	display: block;
	width: 0;
	height: 2px;
	background-color: currentColor;
	transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
    width: 80%;
}
/* MAIN MENU Active colour */
.main-navigation .main-nav ul li[class*=current-menu-] > a {
	color: var(--dema-pink);
}
/* Border in SUB-MENU container ... It's when it overlaps ... */
.main-nav .sub-menu {
	border: solid 1px var(--base-3);
}
/* Slideout MAIN MENU in small devices */
.main-navigation.slideout-navigation figure img {
	margin-top: 15px;
	margin-left: 15px;
	margin-bottom: 20px;
}
.slideout-overlay button.slideout-exit {
	font-weight: 600;
}
.slideout-overlay button.slideout-exit:hover {
	color: var(--dema-pink);
}
/* MAIN MENU Layout in large devices */
/*@media only screen and (min-width: 1194px) {
	.nav-float-right #site-navigation {
		margin-left: 0;
	}
	.main-navigation, #primary-menu {
		width: 100%;
	}
	.main-navigation li:first-child, .main-navigation li:nth-last-child(2) {
		margin-left: auto;
	}
}*/

/*** BUTTONS ***/
/* DIV to center button */
.button-box {
	margin-top: 50px;
}
.button { /*This is a GP custom class*/
	color: var(--base-3);
	margin-left: auto;
	margin-right: auto;
	border-radius: 5px;
}

/*** MISCELLANEA ***/
li::marker {
	color: var(--dema-pink);
}
hr.dema-hr {
	margin-top: 50px;
	margin-bottom: 50px;
	border: 0;
	height: 1px;
	background-image: linear-gradient(to right, rgba(192, 192, 192, 0), rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0));
}
/* QR Codes */
.dema-qrcodes img {
	max-width: 80px;
	margin-left: auto;
	margin-right: auto;
}
/* To size and align QR Codes Captions */
.dema-qrcodes > div {
	font-size: 14px;
	text-align: center;
}
/* Font Awesome icons */
i.dema-icon-deco {
	font-size: 24px;
	color: var(--dema-pink);
	margin-right: 10px;
}
/* Make various elements DeMa Pink */
.make-dema-pink {
	color: var(--dema-pink);
}

/* ***************** */
/* *** HOME PAGE *** */
/* ***************** */

/*** HEADERS in all HOME Sections -- Colours below, if needed ***/
.home h1 {
	font-size: 56px;
	font-weight: 600;
	letter-spacing: 0;
}
.home h2 {;
	font-size: 42px;
	font-weight: 600;
}
.home h2.widget-title {/*Except for FOOTER, which is the default widget title size */
	font-size: 26px;
}
.home h3 {
	font-size: 36px;
	font-weight: 600;
}

/*** BOX CLASSES & HOMEPAGE ELEMENT CLASSES -- Except for Font-Size ***/

/* MAIN BOX */
.dema-main-box {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

/* Used in HERO, WELCOME & WHY CHOOSE DEMA sections */
/* A 50% DIV containing some text */
.dema-sub-box {
	min-width: 50%;
	padding: 45px;
	/*Local Padding settings in HERO sections*/
}
/* A 50% DIV containing an image */
.dema-img-box {
	min-width: 50%;
}
.dema-img-box img {
	max-width: 100%;
	object-fit: cover;
	margin: auto;
	display: block; /*To remove white space below image*/
	box-shadow: 0 5px 10px var(--dema-medium-blue);
}

/* Used in HERO, ANNOUNCEMENT and OUR COURSES sections */
#hero .button, #announcement .button, #our-courses .button {
	color: var(--dema-blue);
	background-color: var(--base-3);
}
#hero .button:hover, #announcement .button:hover, #our-courses .button:hover {
	color: var(--base-3);
	background-color: var(--dema-pink);
}

/* Used in WELCOME & WHY CHOOSE DEMA */
.dema-emphasised {
	font-size: 22px;
	padding-left: 15px;
	border-left: solid 3px var(--dema-pink);
}

/* Used in HERO section only */
#hero {
	background-image: linear-gradient(to right, var(--dema-dark-blue), var(--dema-blue), var(--dema-pink));
}
#hero h1 {
	color: var(--dema-light-blue);
}
#hero .dema-sub-box {
	padding-left: 70px;
}
#hero .dema-img-box img {
	box-shadow: none;
}
@media only screen and (max-width: 800px) {
	#hero {
		display: block;
	}
	#hero .dema-sub-box {
		padding: 20px;
	}
	#hero .button {
		margin-bottom: 10px;
	}
}
@media only screen and (min-width: 800px) and (max-width: 1194px) {
	#hero .dema-sub-box {
		padding-left: 25px;
	}
}

/* Used in ANNOUNCEMENT section only */
#announcement {
	background-color: var(--dema-dark-blue);
}
#announcement > div {
	display: grid;
	grid-template-columns: auto auto /*auto*/;
	column-gap: 20px; /*With 3 Columns, 50px is better ...*/
	align-items: center;
	color: var(--dema-light-blue);
	padding-top: 10px;
	padding-bottom: 10px;
}

/* Used in FEATURED section only */
#featured {
	background-color: var(--dema-medium-blue);
}
.featured-box {
	width: 300px;
	height: 250px;
	text-align: center;
	margin: 50px 10px 50px 10px;
	padding: 10px;
	background-color: var(--dema-light-blue);
}
.featured-box i {
	font-size: 42px;
	color: var(--dema-blue);
	margin-top: 15%;
}
.featured-box a {
	color: var(--dema-blue);
	font-size: 24px;
	line-height: 0;
}
.featured-box a:hover {
	color: var(--dema-pink);
}
/* Responsive FEATURED-section boxes */
@media only screen and (max-width: 800px) {
	#featured {
		display: block;
		padding-bottom: 0;
	}
	.featured-box {
		width: auto;
		height: auto;
		margin: 0;
		border-bottom: solid 3px var(--dema-medium-blue);
	}
	.featured-box i {
		margin-top: 5%;
	}
}

/*
 * SVG WAVY DECORATION settings are in section below....
 *
 * */

/* Used in ANIMATED COUNTERS section only */
#animated-counters {
	text-align: center;
}
#animated-counters h2 {
	margin-top: 70px;
	margin-bottom: 30px;
	color: var(--dema-blue);
}

/* Used in WELCOME section only */
#welcome {
	margin-top: 50px; /*100px;*/
	padding: 100px 0;
	background-color: var(--dema-light-blue);
}
#welcome h2 {
	color: var(--dema-blue);
}
@media only screen and (max-width: 800px) {
	#welcome {
		display: block;
	}
}	
@media only screen and (min-width: 800px) and (max-width: 1194px) {
	#welcome .dema-sub-box {
		padding: 25px;
	}
}
	
/* Used in OUR COURSES section only */
#our-courses {
	display: grid;
	grid-template-columns: 45% 45%;
	align-items: stretch; /*So columns are same height*/
	justify-content: space-evenly;
	padding-top: 150px;
	padding-bottom: 150px;
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url('https://wwwdemaonlinecom8dd32.zapwp.com/q:u/r:0/wp:0/w:1/u:https://www.dema-online.com/wp-content/uploads/2025/05/home_our-courses.webp');
	background-position: top; 
	background-repeat: no-repeat;
	background-size: cover;
}
.our-courses-title {
	grid-column-start: 1;
	grid-column-end: 3;
	text-align: center;
}
#our-courses h2, #our-courses h3, #our-courses p {
	color: var(--base-3);
	text-shadow: var(--dema-medium-blue) 3px 3px 7px;
}
.our-courses-box {
	text-align: center;
	padding: 50px;
}
/* Change Flex to BLOCK in smaller devices */
@media only screen and (max-width: 768px) {
	#our-courses {
		display: block;
	}
	.our-courses-box {
		margin-top: 20px;
	}
}

/* Used in WHY CHOOSE DEMA section only */
/* DIV left to the big image, containing REASONS sub-divs */
#why-choose-dema {
	padding-top: 100px;
	padding-bottom: 50px;
	background-color: var(--dema-light-blue);
} 
#why-choose-dema .dema-sub-box h2 {
	color: var(--dema-blue);
}
#why-choose-dema-reasons {
	display: grid;
	grid-template-columns: 30% 30% 30%;
	align-items: stretch;
	justify-content: space-evenly;
	padding-bottom: 150px;
	background-color: var(--dema-light-blue);
}
#why-choose-dema-reasons .reason {
	background-color: var(--base-3);
	padding: 30px;
	border: solid 1px var(--dema-medium-blue);
	border-radius: 15px;
}
#why-choose-dema-reasons .reason ul li i {
	color: var(--dema-pink);
}
#why-choose-dema-reasons .reason h3 {
	color: var(--dema-blue);
}
/* Responsive WHY CHOOSE DEMA Boxes */
@media only screen and (max-width: 800px) {
	#why-choose-dema {
		display: block;
	}
	#why-choose-dema-reasons {
		display: block;
		margin-top: 0;
	}
	#why-choose-dema-reasons .reason ul {
		margin-left: 0;
		padding-left: 40px;
	}
}

/* Used in C.T.A. section only */
#cta {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 100px;
	margin-bottom: 100px;
	padding-left: 25px;
	padding-right: 25px;
	background-image: radial-gradient(circle, var(--dema-light-blue), var(--dema-medium-blue), #788fcc, #4762b0, var(--dema-blue));
	border-radius: 25px;
	max-width: 1250px; /*No full-width DIV here ...*/
	margin-left: auto;
	margin-right: auto;
}
#cta p {
	font-size: 36px;
}
#cta .dema-img-box img {
	box-shadow: none;
}
/* C.T.A. Text */
.dema-cta-text {
	text-align: center;
	margin-bottom: 30px;
	color: var(--base-3);
	text-shadow: 3px 3px 5px #000000;
}
.dema-cta-button {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
@media only screen and (max-width: 800px) {
	#cta {
		display: block;
	}
	.dema-cta-button {
		padding-bottom: 20px;
	}
}

/* ***************** */
/* *** ALL PAGES *** */
/* ***************** */
/*
 * SVG WAVY DECORATION settings are in section below....
 *
 * */

/* Whole BODY PAGE Background patterns */
body.page-template-default:not(.home) {
	background-color: var(--dema-light-blue);
}
/* Content Area overlaps Hero Image a bit ... */
body.page-template-default:not(.home) .content-area {
	background-color: var(--base-3);
	border: solid 1px var(--dema-medium-blue);
	margin-top: -230px;
	margin-bottom: 50px;
}
/* ... Except in small devices */
@media only screen and (max-width: 800px) {
	body.page-template-default:not(.home) .content-area {
		background-color: var(--base-3);
		border: solid 1px var(--dema-medium-blue);
		margin-top: 0;
		margin-bottom: 0;
	}
}
/* Page Title in Full-width Header */
.dema-page-header h1 {
	text-shadow: 3px 3px 15px #000000;
	letter-spacing: 0.25;
}
@media only screen and (min-width: 800px) and (max-width: 1366px) {
	.dema-page-header h1 {
		margin-left: 30px;
	}
}
/* Special DIVs with border here and there... */
.dema-div-border {
	border: solid 1px var(--dema-light-blue);
	background-color: var(--base-3);
}
/* More space between PRICE TABLE on Course PAGES and other stuff... */
figure.price-table {
	margin-bottom: 40px;
}
/* CAPTIONS in Image Galleries on Book PAGES */
figure.wp-block-image:nth-child(1n) > figcaption.wp-element-caption {
	font-size: 16px;
	font-weight: bold;
}

/* ************************** */
/* *** JUST ON SOME PAGES *** */
/* ************************** */

/* On SERVIZI-EXTRA page */
.dema-help-service {
	width: 90%;
	display: grid;
	grid-template-columns: auto 160px;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	border-bottom: solid 2px var(--dema-white-smoke);
}
.dema-help-service div {/*It must prevent text and image to touch when responsive*/
	padding-right: 10px;
}
.dema-help-service img {
	margin-bottom: 5px;
	width: 150px;
	box-shadow: 0 5px 10px var(--dema-dark-grey);
}

/* *************** */
/* *** SIDEBAR *** */
/* *************** */

#right-sidebar {
	margin-top: -50px;
}
#right-sidebar .widget h2 {
	font-weight: 600;
	border-bottom: solid 1px var(--contrast);
}
/* POLYLANG Titles in SideBar and Footer */
#polylang-14 > h2, #polylang-15 > h2 {
	font-size: 17px;
}
/* QR Codes Div in Sidebar */
#right-sidebar .dema-qrcodes {
	display: grid;
	grid-template-columns: 102px 102px;
	column-gap: 10px;
}

/* ************** */
/* *** FOOTER *** */
/* ************** */
/*
 * SVG WAVY DECORATION settings are in section below....
 *
 * */
.site-footer {
	font-size: 17px;
	margin-top: -2px;
}
.site-footer .site-info {
	font-size: 15px;
}
.inside-site-info {
	border-top: 1px solid #313131;
}
/* FOOTER WIDGETS */
/* Widget 1: BW Logo */
.site-footer .footer-dema-logo {
	display: flex;
	align-items: center; 
	margin-left: -10px;
}
.site-footer .footer-dema-logo img {
	max-width: 80px;
}
.site-footer .footer-dema-logo > div {
	font-size: 20px;
	line-height: 1;
	padding-bottom: 7px;
	border-bottom: 1px solid var(--base-3);
}
/* Widget 2: QR Codes Div in Footer */
.site-footer .dema-qrcodes {
	display: grid;
	grid-template-columns: 102px 102px 102px;
	column-gap: 10px;
}
/* Widget 3: Email Section */
.site-footer .dema-emails {
	display: grid;
	grid-template-columns: 30px auto;
	row-gap: 10px;
	justify-items: left;
}
.site-footer .dema-emails > div:nth-child(1) {
	grid-row-start: 1;
	grid-row-end: 3;
}
/* BLOCK in small devices */
@media only screen and (max-width: 800px) {
	.site-footer .inside-footer-widgets {
		display: block;
	}
	.site-footer .inside-footer-widgets .footer-widget-1, .site-footer .inside-footer-widgets .footer-widget-2, .site-footer .inside-footer-widgets .footer-widget-3 {
		max-width: 100%;
		margin-bottom: 50px;
	}
}
/* A little trick to hide the creation of Xiaohongshu Icon ... */
.xiaohongshu-icon {
	text-decoration: none !important;
	padding: 10px 2px;
	border: solid 3px;
	border-radius: 10px;
}

/* ***** */
/* FORMS */
/* ***** */

/* Free Class Booking Form */
.wpbc_container.wpbc_container_booking_form .wpbc_times_selector > div:not(.wpbc_time_selected) {
	border: solid 1px var(--dema-medium-blue);
	color: var(--dema-medium-blue);
}
.wpbc_container.wpbc_container_booking_form .wpbc_time_selected {
	background-color: var(--dema-medium-blue);
	border: 0;
	color: var(--base-3);
}
.wpbc_container .wpbc_button_light, 
.wpbc_container.wpbc_container_booking_form .wpbc_button_light {
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 5px !important;
	color: var(--base-3) !important;
	background-color: var(--dema-blue) !important;
}
.wpbc_container .wpbc_button_light:hover,
.wpbc_container .wpbc_button_light:focus {
	background-color: var(--dema-pink) !important;
}
.wpbc_container.wpbc_container_booking_form label, .wpbc_container.wpbc_container_booking_form button {
	font-size: 17px !important;
}
/* Contact Form */
.dema-form-box {
	padding: 20px;
	box-shadow: 0 5px 10px var(--dema-dark-grey);
}
.dema-form-box .wpforms-title {
	font-weight: bold;
}
#wpforms-submit-3729, #wpforms-submit-3680 {
	border-radius: 5px;
	color: var(--base-3);
	background-color: var(--dema-blue);
}
#wpforms-submit-3729:hover, #wpforms-submit-3680:hover {
	background-color: var(--dema-pink);
}

/* ******************** */
/* SVG WAVY DECORATIONS
/* ******************** */

/* All Pages */
.dema-page-divider {
	width: 100%;
	overflow: hidden;
	line-height: 0;
	z-index: -10;
	padding: 0;
}
.dema-page-divider .dema-shape-fill  {
	fill: var(--dema-medium-blue);
}
/* Footer */
.dema-footer-divider {
	width: 100%;
	overflow: hidden;
	line-height: 0;
	transform: rotate(180deg);
}
.dema-footer-divider .dema-shape-fill {
	fill: #010c20;
}
/* Both all Pages and Footer */
.dema-page-divider svg, .dema-footer-divider svg {
	display: block;
	width: 100%; /*calc(100% + 1.3px)*/
	height: 150px;
	margin-top: -1px; /*This is needed to remove a thin white line between SVG and above section in some browsers*/
}

/* ********************* */
/* MARCO POLO & TURANDOT */
/* ********************* */

/* Progetto CN: Steps */
.marc-tur-steps-container {
	display: grid;
	grid-template-columns: 25% 10% 25% 10% 25%;
	align-items: center;
	text-align: center;
}
.marc-tur-steps {
	font-weight: bold;
	padding: 10px;
	border:solid 2px var(--dema-pink);
	border-radius: 10px;
	box-shadow: 0 5px 10px var(--dema-dark-grey);
}
.marc-tur-steps span:first-of-type {
	color: var(--dema-pink);
}

/* *** Intro DIV *** */
.marc-tur-intro {
	display: grid;
	grid-template-columns: 33% 33% 33%;
	row-gap: 20px;
	margin-bottom: 50px;
	justify-items: center;
}
.marc-tur-intro i {
	color: var(--dema-medium-blue);
}
/* *** TABS *** */
h2.marc-tur {
	font-size: 2em;
	/*color: #aa0000;*/
	color: var(--dema-medium-blue);
}
.tab-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tabs {
	display: inline-block;
}
.tab {
  cursor: pointer;
  padding: 10px 20px;
  margin: -2px 2px;
  background: var(--dema-medium-blue);
  display: inline-block;
  color: var(--base-3);
  border-radius:3px 3px 0px 0px;
}
.panels {
  background: var(--dema-light-blue);
  box-shadow: 0px 10px 10px var(--dema-dark-grey);
  min-height: 200px;
  width: 100%;
  max-width: 700px;
  border-radius: 3px;
  overflow: hidden;
  padding-right: 10px;
}
#one-panel {
	padding: 10px;
	height: 450px;
	background-image: url('https://wwwdemaonlinecom8dd32.zapwp.com/q:u/r:0/wp:0/w:1/u:https://www.dema-online.com/wp-content/uploads/2025/04/marctur_cathedral.webp');
	background-position: bottom right;
	background-repeat: no-repeat;
}
#two-panel {
	padding: 10px;
	height: 450px;
	background-image: url('https://wwwdemaonlinecom8dd32.zapwp.com/q:u/r:0/wp:0/w:1/u:https://www.dema-online.com/wp-content/uploads/2025/04/marctur_castle.webp');
	background-position: bottom right;
	background-repeat: no-repeat;
}
#three-panel {
	padding: 10px;
	height: 450px;
	background-image: url('https://wwwdemaonlinecom8dd32.zapwp.com/q:u/r:0/wp:0/w:1/u:https://www.dema-online.com/wp-content/uploads/2025/04/marctur_colosseum.webp');
	background-position: bottom right;
	background-repeat: no-repeat;
}
.panel {
	font-size: 1.25em;
	display: none;
	animation: fadein .8s;
	width: 700px;
	height: 450px;
}
.panel ul {
	padding: 0px;
}
.panel ul li {
	margin-bottom: 20px;
	margin-right: 20px;
	padding-right: 10px;
}
@supports (background: -webkit-named-image(i)) {
	margin-bottom: 20px;
	margin-right: 20px;
	padding-right: 10px;
}
@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.panel-title {
  /*font-size: 1.5em;*/
  margin-top: 50px;
  margin-left: 20px;
  font-weight: 600;
}
.radio {
  display: none;
}
#one:checked ~ .panels #one-panel,
#two:checked ~ .panels #two-panel,
#three:checked ~ .panels #three-panel {
  display: block
}
#one:checked ~ .tabs #one-tab,
#two:checked ~ .tabs #two-tab,
#three:checked ~ .tabs #three-tab{
  background: var(--dema-light-blue);
  color: var(--contrast);
  border-top: 1px solid var(--dema-blue);
}