@charset "utf-8";
/* CSS Document */
/*
Student1: AOUN Patrick 201710226;
Student2: HAMMOUD Mayssa'a 201710161;
*/
body{
	font-size:20px;
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	background-color:#919191;
	margin:0px;
}
#top{
	position:relative;
	width:100%;
	text-align:center;
}
#top #main{
	position:relative;
	height:10em;
	background-color:#666666;	/*bgcolor is gray*/
	color:white;	/*text color white*/
}
#top #title{
	position:relative;
	font-size:3.5em;
}
#top #caption{
	position:relative;
	font-size:2em;
	font-family:volkhov;
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;	/*doesn't move*/
  z-index: 999999;	/*put the sidenav above all */
  top: 0;	/*starts from top of the page*/
  left: 0;	/*starts from the max left (as collapsed to the left)*/
  background-color: #111;
  overflow-x: hidden;	/*doesn't show an overflow*/
  transition: 0.5s;	/*takes 0.5seconds to open*/
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;	/*takes 0.3seconds to open*/
}

.sidenav a:hover {
  color: #f1f1f1;
}

#menu{
	list-style-type: none;
	width:100%;
	margin: 0;	/*no marging*/
	padding: 0;	/*no padding*/
	font-size:150%;
	font-family: "Times New Roman", Times, serif;
	clear:both; /*The clear property specifies on which sides of an element floating elements are not allowed to float*/
	
}
#menu > li{
	width: 20%;
	float: left;
	margin: 0;
	padding: 0;
	border: 0;
	text-align:center;
	background-color:rgb(70, 118, 72, 1); /*the 1 stands for the opacity*/	
	
}
#menu .sousMenu{
	width: 20%;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	display: none; /*doesn't display the sousMenu*/
	background-color:rgb(70, 118, 72, 0.3);	/*opacity is 0.3*/
	z-index:99;
	position:absolute;
}
#menu .sousMenu li{
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	z-index:99;	
}
#menu li a:link, #menu li a:visited{
	display: block;
	color: #FFF; 
	background-color:rgb(70, 118, 72, 0.3);  
	margin: 0;
	padding: 0.7em 1em;	
	text-decoration: none;
	z-index:99;
}
#menu li a:hover{
	background-color: black; /*when we hover the background becomes black*/
	z-index:99;
}
#menu .sousMenu li a:hover{
	background-color: black;
	z-index:99;
}
#menu li:hover  .sousMenu { 
	display: block; 
	z-index:99;
}
.affix {	/*affix is a predefined class*/
      top: 0;
      width: 100%;
      z-index: 99 !important; /*it only focus on the z-index*/
}
.container{ /*predefined class*/
	margin-top:10em;
}
.welcome{
	border:7px outset #467648;
	text-align:center;
	margin-bottom:1em;
}
.gotIm{
	width:100%;
	border:4px double #467648;
}
#logo{
	width:17%;
	position:absolute;
	top:0;
	left:0;
	height:10em;
}
.container #txt{
	margin-top:5%;
	border:4px solid #467648;
	font-size:1em;
}
.leftNav{
	position:relative;
	float:left;
	width:15%;
	height:100%;
	background-color:#4B4B4B;
	margin-top:4.5em;
}
.button{
	width:100%;
	background-color:#467648;
	border:solid black;
	color:white;
	border-top:none;
	
}
.button-top{
	border-top:solid black;
}
.active{
	background-color:#888;
}
.button:hover{
	background-color:black;
	
}
.charimg{
	float:left;
	width:25%;
}
.charimg img{
	width:100%;
	margin-left:5em;
	margin-right:15em;
	padding-right:5em;
}
.charabt{
	float:right;
	border:4px solid #467648;
	margin-right:5em;
	margin-left:3em;
	overflow:auto; /*shows a vertical scroll bar*/
	width:27em;
	height:13.5em;
	padding-left:1em;
	padding-right:1em;
	color:#CACACA;
	background-color:#444;
}
.seasimg{
	float:left;
	width:30%;
}
.seasimg img{
	width:100%;
	margin-left:5em;
	margin-right:1em;
}
.seasabt{	
	margin-left:2em;
	margin-right:2em;
	padding-left:2em;
	border:4px solid #467648;
	color:#CACACA;
	background-color:#444;
	float:right;
	width:22em;
	overflow:auto; /*shows a vertical scroll*/
}
.Seas1{
	height:50%;
	position:relative;
}
h3{
	text-decoration:underline;
}
.debut{
	text-align:center;
	width:100%;
}
.paragraphe{
	font-size:1.5em;
	margin-left:1.5em;
	color:white;
	text-align:center;
	width:inherit; /*the width takes the properties of the predefined class:container*/
	background-size:auto;
}
.gif{
	text-align:center;
}
.video{
	width:100%;
	text-align:center;
}
.video img{
	width:100%;
}
.h1{
	text-align:center;
}
.cominSoon{
	text-align:center;
}
.sherlabt1{
	border:5px dotted #467648;
	text-align:center;
	overflow:auto;
	margin-bottom:10px;
}
.sherlabt2{
	border:5px dotted #467648;
	text-align:center;
	overflow:auto;
	height:500px;
	margin-top:10px;
}

#footer{
	position:relative;
	margin-left:auto;
	margin-right:auto;	
	width:100%;
	background-color:black;
	clear:both;
	margin-top:0.5em;
	padding:0.5em 0;
	color:white;
	text-align:center;
}
.vl { /*predefined class for facebook,intagram,...etc icons*/
	display:inline; /* next to each other*/
	padding-left:2em;
	padding-right:2em;
    
}
#footer a{
	color:white;
}
#footer a:hover{
	color:cyan;
}
/*cellphone*/
@media only screen and (max-width : 768px){
	body{
		font-size:15px;
	}
	#menu{
		display:none; /*doesn't show the menu bar*/
	}
	#top{
		position:relative;
		width:100%;
	}
	#top {
		position:relative;
		height:2em;
		color:white;
		text-align:center;
	}
	#top #title{
		display:none; /*doesn't show the title*/
	}
	#top #caption{
		display:none;	/*doesn't show the caption*/
	}
	#logo{
		position:relative;
		heigth:70%;
		text-align:center;
	}
	.sidebtn{
		z-index:1;
		position:absolute;
		top:15%;
		left:2%;
		height:70%;
		width:20%;
	}
	.bigButton{
		width:100%;
	}
	.sidebtninner{
		height:100%;
		width:100%;
		font-size:300%; /*makes the icon bigger*/
		background-color:yellow;
		color:black;
	}
	.headerCarousel{
		display:none; /*doesn't show texts on the carousel slideshow*/
	}
	#footer{
		margin-top:150px;	
	}
	.leftNav{
		margin-top:150px;
		width:35%;
	}
	.charimg{
		text-align:center;
		width:65%;
	}
	.charimg img{
		margin-right:0;
		padding-right:0;
		margin-left:0;
		width:80%;
	}
	.charabt{
		text-align:center;
		width:100%;
		margin-right:0em;
		margin-left:0em;
		margin-top:10%;
		height:358.71695px;
	}
	.seasimg{
		width:50%;
	}
	.seasimg img{
		width:90%;
	}
	.seasabt{
		margin-left:0;
		margin-right:0;
		padding-left:0;
		text-align:center;
		margin-top:100px;
		overflow:auto;
	}
	.sherlock1{
		width:100%;
	}	
}
/*ipad*/
@media only screen and (min-width : 769px) and (max-width : 1199px){
	body{
		font-size:17px;
	}
	#menu{
		display:none;
	}
	#top{
		width:100%;
		height:2em;
		color:white;
		text-align:center;
	}
	#top #title{
		display:none;
	}
	#top #caption{
		display:none;
	}
	#logo{
		position:relative;
		heigth:70%;
		text-align:center;
	}
	.sidebtn{
		z-index:1;
		position:absolute;
		top:15%;
		left:2%;
		height:70%;
		width:15%;
	}
	.bigButton{
		width:90%;
	}
	.sidebtninner{
		height:100%;
		width:100%;
		font-size:300%;
		background-color:yellow;
		color:black;
	}
	.headerCarousel{
		display:none; /*doesn't show texts on the carousel slideshow*/
	}
	#footer{
		margin-top:150px;	
	}
	.leftNav{
		margin-top:150px;
		width:30%;
	}
	.charimg{
		text-align:center;
		width:60%;
	}
	.charimg img{
		margin-right:0;
		padding-right:0;
		margin-left:0;
		width:60%;
	}
	.charabt{
		text-align:center;
		width:100%;
		margin-right:0em;
		margin-left:0em;
		margin-top:10%;
		height:358.71695px;
	}
	.seasimg{
		width:60%;
	}
	.seasabt{
		margin-left:0;
		margin-right:0;
		padding-left:0;
		text-align:center;
		margin-top:100px;
		width:100%;
		overflow:auto;
	}
	.sherlock1{
		width:100%;
	}
}
@media only screen and (min-width : 1200px ){
	.sidebtn{
		display:none;
	}
}