*{

	font-family: Arial, Helvetica, sans-serif
}



body {

	color: white
}

.row {
	display: flex;
	
	
  }
  
  .column {
	flex: 50%;
	
  }


h2{

	color: black;
font-size: 60px;
	margin: 10px 50px;

}

p1{
	font-size: 25px;
		font-family: arial,helvetica;
		color: rgb(255, 255, 255);
		margin-left: 30px;
		margin-bottom:30px;
text-align: left,start;
display:block;
}

h1{ 
	text-align: start, left;
	color: black;
	margin: 50px;
	font-size: 17px;
	
}

p{

color: black;
text-align: left;
margin: 50px;
font-size: 16px;
line-height: 150%;




}

/* font for mobile version */

p2{
	color: black;
	text-align: left;
	padding: 50px;
	font-size: 30px;
	line-height: 150%;
	display:block;

}

h3{

	color: black;
	text-align: left;
	padding: 50px;
	font-size: 30px;
	line-height: 150%;
	display:block;
	font-weight: bold;



}

p3{


	font-size: 60px;
	font-family: arial,helvetica;
	color: rgb(255, 255, 255);
	margin-left: 30px;
	margin-bottom:30px;
text-align: left,start;
display:block;



}

#myVideo{
	position: absolute;
	right: 0;
	bottom: 0;
	top:0;
	right:0;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	 background-color: black; /* in case the video doesn't fit the whole page*/
	  
	  background-position: center center;
	  background-size: contain;
	   object-fit: cover; /*cover video background */
	   z-index:3;
}

#section0 .layer{
	position: absolute;
	z-index: 4;
	width: 75%;
	left: 0;
	bottom: 0;

	overflow: hidden;
	/*
	* Preventing flicker on some browsers
	* See http://stackoverflow.com/a/36671466/1081396  or issue #183
	*/
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/* new layer for mobile */

#section0 .layermobile{
	position: absolute;
	z-index: 4;
	width: 100%;
	left: 0;
	bottom: 0;

	overflow: hidden;
	/*
	* Preventing flicker on some browsers
	* See http://stackoverflow.com/a/36671466/1081396  or issue #183
	*/
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/*solves problem with overflowing video in Mac with Chrome */
#section0{
	overflow: hidden;}



.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px black;
	color:black
  }
  
  .tooltip .tooltiptext {
	visibility: hidden;
	width: auto;
	min-width: 400px;
	right:100%;
  
	background-color: white;
	color: black;
	text-align: left;
	padding: 5px;
	border-style:solid;
	border-color:black;
	
  

	
	/* Position the tooltip */
	position: absolute;
  z-index: 1;



  
  }

  .tooltip3 {
	position: relative;
	display: inline-block;
	border-bottom: 1px black;
	color:black
  }
  
  .tooltip3 .tooltiptext3 {
	visibility: hidden;
	width: auto;
	min-width: 400px;
	
  
	background-color: white;
	color: black;
	text-align: left;
	padding: 5px;
	border-style:solid;
	border-color:black;
	
  

	
	/* Position the tooltip */
	position: absolute;
  z-index: 1;



  
  }




  
.tooltip2 {
	position: relative;
	display: inline-block;
	border-bottom: 1px black;
	color:black
  }
  .tooltip2 .tooltiptext2 {
	visibility: hidden;
	width: auto;
top: 90%;
left:50%;
	background-color:white;
	color: black;
	text-align: left;
	padding: 5px;
	border-style:solid;
	border-color:black;
	
  

	
	/* Position the tooltip */
	position: absolute;
  z-index: 1;

  }

  /* this is for the long tooltip */

  .tooltip4 {
	position: relative;
	display: inline-block;
	border-bottom: 1px black;
	color:black
  }
  
  .tooltip4 .tooltiptext4 {
	visibility: hidden;
	width: auto;
	min-width: 400px;
	bottom: 100%;
	
  
	background-color: white;
	color: black;
	text-align: left;
	padding: 5px;
	border-style:solid;
	border-color:black;
	
  

	
	/* Position the tooltip */
	position: absolute;
  z-index: 1;



  
  }

/* the other long one */

  .tooltip5 {
	position: relative;
	display: inline-block;
	border-bottom: 1px black;
	color:black
  }
  
  .tooltip5 .tooltiptext5 {
	visibility: hidden;
	width: auto;
	min-width: 400px;
	bottom: 100%;
	right:100%;
	
  
	background-color: white;
	color: black;
	text-align: left;
	padding: 5px;
	border-style:solid;
	border-color:black;
	
  

	
	/* Position the tooltip */
	position: absolute;
  z-index: 1;



  
  }


/* hover function for each tooltip */

.tooltip5:hover .tooltiptext5 {
	visibility: visible;
  }

  .tooltip4:hover .tooltiptext4 {
	visibility: visible;
  }

  .tooltip3:hover .tooltiptext3 {
	visibility: visible;
  }
 
  .tooltip2:hover .tooltiptext2 {
	visibility: visible;
  }
  .tooltip:hover .tooltiptext {
	visibility: visible;
  }


  footnote{

color: black;
text-decoration: underline;

  }

/* color modification of the menu */

  .fp-viewing-firstPage #menu li a {
	color:white;
	font-size: 25px;
	font-weight:normal;
}
  
.fp-viewing-firstPage .dropbtn {
	color:white;
	font-size: 25px;
	font-weight: normal;
}

.fp-viewing-firstPage .dropdown-content {
	background-color: transparent;
	color:black;
	z-index: 5;
}

.fp-viewing-firstPage .dropdown {
	color: black
}

.fp-viewing-17thpage #menu li.active a:hover {
	color: white
}

.fp-viewing-17thpage #menu li a {
	color:white;
	font-size: 20px;
	font-weight:normal;
}
  
.fp-viewing-17thpage .dropbtn {
	color:white;
	font-size: 20px;
	font-weight: normal;
}

.fp-viewing-17thpage .dropdown-content {
	background-color: transparent;
	color:black;
	z-index: 5;
}

.fp-viewing-17thpage .dropdown {
	color: black
}

.fp-viewing-firstPage #menu li.active a:hover {
	color: white
}
.fp-viewing-27 #menu li.active a:hover {
	color: white
}

.fp-viewing-27 #menu li a {
	color:white;
	font-size: 20px;
	font-weight:normal;
}
  
.fp-viewing-27 .dropbtn {
	color:white;
	font-size: 20px;
	font-weight: normal;
}

.fp-viewing-27 .dropdown-content {
	background-color: transparent;
	color:black;
	z-index: 5;
}

.fp-viewing-27 .dropdown {
	color: black
}

/* menu style */

  #menu li {
	display:inline-block;
	margin: 10px;
	color: #000;
	background: transparent;
	font-size: 20px;
	font-weight: normal;
}
#menu li.active{
	
	background: transparent;
	color: black;
}
#menu li a{
	text-decoration:none;
	color: #000;
}
#menu li.active a:hover{
	color: #000;
}
#menu li:hover{
	background: transparent;
}
#menu li a,
#menu li.active a{
	padding: 9px 18px;
	display:block;
}

#menu{
	position:fixed;
	top:0;
	left:0;
	height: 40px;
	z-index: 70;
	width: 100%;
	padding: 0;
	margin:0;
}

/* dropdown menu */

#fp-nav ul li .fp-tooltip {
    position: absolute;
    top: -2px;
    color: black;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    display: block;
    opacity: 0;
    width: 0;
    cursor: pointer;
}

.dropbtn {
	background-color: transparent;
	color: black;
	padding: 16px;
	font-size: 20px;
	border: none;
	cursor: pointer;
	font-weight: normal;
  }
  
  .dropdown {
	position: relative;
	display: inline-block;
  }
  
  .dropdown-content {
	display: none;
	position: absolute;
	background-color: white;
	z-index: 1;
	width: 300px;

  }
  
  .dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
  }
  
  .dropdown-content a:hover {background-color: transparent;}
  
  .dropdown:hover .dropdown-content {display: block;}
  
  .dropdown:hover .dropbtn {background-color: transparent;}

  .header {background-color: transparent;}

/* mobile menu style */

#menumobile li {
	display:inline-block;
	margin: 10px;
	color: red;
	background: transparent;
	font-size: 50px;
	font-weight: normal;
}
#menumobile li.active{
	
	background: transparent;
	color: red;
}
#menumobile li a{
	text-decoration:none;
	color: red;
}
#menumobile li.active a:hover{
	color: red;
}
#menumobile li:hover{
	background: transparent;
}
#menumobile li a,
#menumobile li.active a{
	padding: 9px 18px;
	display:block;
}

#menumobile{
	position:fixed;
	top:0;
	left:0;
	height: 40px;
	z-index: 70;
	width: 100%;
	padding: 0;
	margin:0;
}