/**********
 * This is the css used for the main part of the website where there is a menu that allow to 
 * choose from "presentation","capsule", "forum", etc...
 ****************************************************************************/
 
#banner{
  width:calc(var(--banner-height)/var(--banner-img-height)*var(--banner-img-width));
  height:var(--banner-height);
  margin-top:15px;
  margin-left: calc((100vw - var(--banner-height)/var(--banner-img-height)*var(--banner-img-width))/2);
}

#banner img{
    width:100%;
  height:100%;
  
}

.page{
  display:flex;
  flex-direction:column;
	min-width:100%;
	/*height:120vh; /*To ajust if doesn't scroll ennought */
	margin-top:var(--header-height);
	padding-top:var(--page-top-space);
	 background-color:var(--global-background);
}

/*#menu-and-section{
  display:flex;
  flex-direction:row;
	min-width:100%;
	height:calc(100vh - var(--header-height) - var(--footer-height) - 20vh); /* .page height - #banner height
	padding:0px;
  justify-content:space-between;
}*/

#actual-section{
	padding:0px;
	padding-left:30px;
	color: rgb(100,100,100);
	background-color: var(--global-background);
}

/*#menu-button{
	width:100%;
	height:100%;
}*/

.menu-link a{
	text-decoration:none;
	font-size:1em;
	font-weight:700;
	color: var(--global-darker);
}

.menu-link:hover{
  	text-decoration:underline;
	cursor:pointer;
}

#left-side{
	left: 4%;
	width:19%;
	position: absolute;
  top: calc(var(--banner-height) + var(--header-height) + var(--page-top-space) + 2vh);
}

.nav{
	display:flex;
	flex-direction:column;
	justify-content:space-around;
}

.side-separator{
	font-size:3em;
}

.invisible-space{
	font-size:1.5em;
	color:var(--global-background);
}

.top-separator{
	font-size:0.3em;
  margin-left:-30px;
}

#main-content{
	text-align:justify;
	font-size:1em;
	position:relative;
	/*width: 100%;*/
  /*height: 100%;*/
 /*   overflow-y: scroll;
    padding-right: 50px; /* Increase/decrease this value for cross-browser compatibility 
    box-sizing: content-box; /* So the width will be 100% + 17px */	
}

#main-content-container{
  position:absolute;
  top: calc(var(--banner-height) + var(--header-height) + var(--page-top-space) + 5vh ) !important;
	/*grid-column: 3;*/
    width: calc(20vh/var(--banner-img-height)*var(--banner-img-width)); /* #banner width */
   /* height: 100%;
    overflow: hidden;*/
	margin-left: calc((100vw - 20vh/var(--banner-img-height)*var(--banner-img-width))/2); /* same as #banner */
}

 /* Hide scrollbar for Chrome, Safari and Opera 
#main-content::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox 
#main-content{
  -ms-overflow-style: none;  /* IE and Edge 
  scrollbar-width: none;  /* Firefox 
} */

p{
	color:rgb(1,1,1);
	font-family:"Arial", sans-serif;
	font-weight:400;
	font-style:normal;
	text-align:justify;
}

hr{
	color:var(--global-background);
}

.par{
	text-indent: 30px;
}

.info{
	padding-left:15px;
}

.enter-app-link {
	text-align:center;
	margin-top:100px;
	color: var(--global-darker);
	font-size:1.5em;
}

.video-link {
	color:var(--global-darker);
}
	
.vertical-separator
{
	background-color:var(--global-color);
	color:var(--global-color);
	width:1px;
	height:100px;
}

.user-choice
{
	margin:auto;
	display:flex;
	justify-content:space-around;	
}



/*THE FOLLOWING IS CONSIDERED WHEN DOING RESPONSIVE DESIGN
@media screen and (min-device-width: 1570px) {

	.menu-item{
		padding:1%;
	}
	
	.menu-link{
		font-size:1.2em;
	}
	
	#main-content{
		width: 50%;
	    margin-left:20%;
		margin-right:30%;		
	}
	
	p {
		font-size:1.2em;
	}

	#left-side{
		left: 20%;
		width:15%;
	}
}

/*
@media screen and (max-device-width: 800px) {

	.page{
		display: grid;
		grid-template-columns:1fr;
		grid-template-rows: 4.5em 5em 9.5em 10em 50em;
		grid-gap: 0;
		min-width:100%;
		margin:0px;
		padding:0px;
	}

	.left-side{
		position:fixed;
		top:9.5em;
		left:0px;
		padding:5px;
	}

		.menu-button-container{
		width:30px;
		height:30px;
		display:block;
	}

	.menu-item{
		font-size:0.8em;
		padding:1px;
		display:none;
	}

	.side-separator {
		display:none;
	}

	.mainContent{
		grid-row: 5;
		margin-left:5%;
		margin-right:5%;
		font-size:1.2em;
	}
}*/