MediaWiki:Mobile.css

/* All CSS here will be loaded for users of the mobile site */
/* Gli stili CSS inseriti qui si applicano agli utenti che usano il sito per dispositivi mobili */

#p-tb{
 display : none;
}
body.page-Pagina_principale.action-view h1.firstHeading, body.page-Pagina_principale.action-submit h1.firstHeading { display: none; }
body.page-Pagina_principale li#ca-talk { display: none !important; }


#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: black; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
}

#myBtn a:link,
#myBtn a:visited,
#myBtn a:hover {
    color: white; /* Text color */
}
#myBtn a:hover {
    background-color: #000; /* Add a dark-grey background on hover */
}

#myBtn a:focus,
#myBtn a:hover {
    text-decoration: none;
}

/* Styling for JQuery makeCollapsible, matching that of collapseButton */
.mw-parser-output .mw-collapsible-toggle {
	font-weight: normal;
	/* @noflip */
	text-align: right;
	padding-right: 0.2em;
	padding-left: 0.2em;
}
.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
	/* @noflip */
	float: left;
	/* @noflip */
	text-align: left;
}

/* ========================== Integrazione pagine Wix 2024 ========================== */
/* ============= Generale ============= */
body {
	color: #333;
}

.custom-h0 {
	font-size: 300%;
	color: #116089;
}
.custom-h1 {
	font-size: 200%;
	color: #116089;
}
.custom-h2 {
	font-size: 150%;
	color: #116089;
}
.custom-subtitle {
	font-size: 125%;
	color: grey;
}

.left {
	text-align: left;
}
.center {
	text-align: center;
}
.right {
	text-align: right;
}

.rounded-logo {
	border-radius: 100%;
}

.colour-button a {
	padding: 1rem 2rem;
	margin: 2rem 0;
	border-radius: 3rem;
	background-image: linear-gradient(126deg, #5f5bcd 24%, #ff5700 100%);
	transition: .5s;
	color: white;
	text-decoration: none;
}
.colour-button a:hover {
	background-image: linear-gradient(160deg, #5f5bcd 24%, #ff5700 100%);
	color: white;
	text-decoration: none;
}

.side-by-side {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	justify-content: center;
	align-items: center;
}
.side-by-side > div {
	width: 100%;
}

.separator {
	border: 1px solid silver;
	width: 50%;
	margin: 3rem auto;
}

.cover {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 550px;
	background-size: cover;
	background-position: center;
	text-align: center;
	line-height: 400%;
}

/*.full-width {
	margin: 0 calc(-1*((99vw - 993px)/2));
}*/

/* ============= Home ============= */
.homepage-slider {
	position: relative;
	height: 550px;
	background-color: white;
}
.homepage-logo-container {
    position: absolute;
    top: -70px;
    left: 20px;
    z-index: 100;
}

.homepage-slide-1, .homepage-slide-2, .homepage-slide-3 {
	position: absolute;
	height: 550px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	text-shadow: 2px 2px 40px rgba(0,0,0,0.9);
	font-size: 500%;
	animation-duration: 15s;
	animation-iteration-count: infinite;
	background-color: #dadada;
	background-blend-mode: overlay;
	background-position: center;
	background-size: cover;	
}
.homepage-slide-1 {
	background-image: url(https://wiki.masticationpedia.org/images/a/a2/The_Past.jpg);
    animation-name: slide-1-animation;
}
.homepage-slide-2 {
	background-image: url(https://wiki.masticationpedia.org/images/9/9c/The_Present.jpg);
    animation-name: slide-2-animation;
}
.homepage-slide-3 {
	background-image: url(https://wiki.masticationpedia.org/images/a/ad/The_Future.jpg);
    animation-name: slide-3-animation;
}
@keyframes slide-1-animation {
	0% { opacity: 0; }
	2% { opacity: 1; }
	31% { opacity: 1; }
	35% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes slide-2-animation {
	0% { opacity: 0; }
	31% { opacity: 0; }
	35% { opacity: 1; }
	66% { opacity: 1; }
	69% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes slide-3-animation {
	0% { opacity: 0; }
	65% { opacity: 0; }
	69% { opacity: 1; }
	98% { opacity: 1; }
	100% { opacity: 0; }
}

.homepage-what-is-it, .homepage-how-to-follow-it, .homepage-why-to-enroll {
	padding: 2rem;
	background-color: rgba(196,196,196, .4);
}
.homepage-what-is-it {
	margin-top: -6.5rem;
	z-index: 103;
}
.homepage-how-to-follow-it {
	text-align: right;
}

.for-editors a {
	display: inline-block;
	padding: .5rem 1rem;
	background-color: #02b8bf;
	color: white;
	text-align: right;
	transition: .5s;
}
.for-editors a:hover {
	background-color: #6bd0d4;
	text-decoration: none;
}
.perspective {
	display: flex;
	flex-direction: column;
	gap: 2rem;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    perspective-origin: 10% 60%;
}
.three-d-image-container {
	width: 400px;
    background-color: cornflowerblue;
    transition: 1s;
    transform: rotateX(4deg) rotateY(-15deg) rotateZ(2deg);
    box-shadow: 10px 10px 30px rgba(0 0 0 / .2);
}
.three-d-image-container:hover {
   transform: rotateX(6deg) rotateY(-25deg) rotateZ(3deg);
   box-shadow: 10px 20px 30px rgba(0 0 0 / .3);
}

.informative-video {
	width: 15rem;
	margin: 1rem 0;
	padding: 1rem 2rem;
	border-radius: 3rem;
	background-color: #116089;
	text-align: center;
	color: white;
	transition: .5s;
}
.informative-video:hover {
	letter-spacing: .2rem;
}

.einstein-quote {
	padding: 3rem 15vw;
	background-image: url('https://wiki.masticationpedia.org/images/5/50/Cityscape.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: white;
	text-align: center;
}

.hidden-except-on-intersection {
	opacity: 0;
	transition: 2s;
}
.fade-in-on-intersection {
	opacity: 1;
}