* {
	margin:0;
	padding: 0;
	box-sizing: border-box;
}

h1, h2, h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}


body{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    /* background-color: #fff;
    color: #333; */
	background-color: #333;
    color: #fff;
    font-size: 16px;
}

.container {
	height: 100vh;
	display: flex;
	flex-direction: column;
}

/* =====================================
				HEADER
   ===================================== */
header{
	/* background-color: #eee;	 */
	height: 70px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;	

	img {
		width: 30px;
		/* box-shadow: 3px 3px 10px #336699; */		
		border-radius: 5px;;
	}

	h1 {
		font-size: 1.5rem;
		/* color: #336699; */
		text-align: center;
	}

	.icon-menu {
		width: 40px;
		height: 20px;	
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		&>.line {
			width: 100%;
			height: 2px;
			/* background-color: #336699; */
			background-color: #fff;
		}
	}
	
}

/* ==========  MENÚ ================ */
.menu {
	position: absolute;
	top: 70px;  /* Es controlarà per javascript */
	left:0;
	width: 100vw;
	z-index:2;
	background-color: #ddd;
	color: #333;
	padding: 10px;
	font-size: 1rem;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
    row-gap: 5px;
	
	&>a, &>a:visited{
		text-decoration: none;
		color: #336699;		
		text-align: center;		
	}	
	&>a.no-active {
		display: none;
	}
}

.no-visible {
	display: none;
}

.icon-menu {
	cursor: pointer;
}


/* =====================================
				MAIN
   ===================================== */
.carousel {
	height: calc(100vh - 70px - 70px);
	width: 100%; /*  S'ha de canviar amb Javascript */
	overflow: hidden;
	margin: 0 auto;
}

.carousel-container{
	width: calc( 2* 100%);   /* Quan hi ha dues imatges. S'ha de canviar amb Javascript */
	height: 100%;
	
	display: flex;
	transition: all .4s ease;
	transform: translateX(0%);
}

.element {
	width: calc(100% / 2);    /* Quan hi ha dues imatges. S'ha de canviar amb Javascript */
	height: 100%;
	/* display: flex;
	justify-content: center;
	align-items: center; */
}

img {	
	height: 100%;
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* =====================================
				FOOTER
   ===================================== */
footer{
	/* background-color: #eee; */
	height: 70px;
	display: flex;
	justify-content: center;
	align-items: center;

	.footer-content {
		width: 250px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #979090;

		&>p{
			font-size: 40px;
			color: #979090;
			cursor: pointer;
		}

		span {
			font-size: 30px;
		}
	}
}

@media only screen and (max-width: 480px) {
	.no-on-phone {
		display: none;
	}
	
	.carousel {
		height: 100%;		
	}

	header{
		h1 {
			font-size: 1rem;
		}
	}	

}