html, body, div, span, img, tr, th, td, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: ;
	font: inherit;
	vertical-align: baseline;}
body{background-color:rgb(184,232,205);
background-image:url();background-size:cover;font-family:Calibris Light,sans-serif; font-style:; font-size:16px; font-color:rgb(33,39,124);
}

.td1 {width:10%;height:100%; border:px solid red;text-align: center; vertical-align:middle;padding:0px;}
@media only screen and (min-width: 1050px){.td1 {width:10%; }}
@media screen and (min-width: 770px) and (max-width: 1050px){.td1{width:10%;}}
@media screen and (min-width: 650px) and (max-width: 770px){.td1{width:15%; }}
@media screen and (min-width: 580px) and (max-width: 650px){.td1{width:5%; }}
@media only screen and (max-width: 580px){.td1{width:20%; }}

.td2 {width: 90%;height:100%; border: px solid yellow;text-align: center; vertical-align: middle;}
@media only screen and (min-width: 1050px){.td2 {width:90%;}}
@media screen and (min-width: 770px) and (max-width: 1050px){.td2{width:90%; }}
@media screen and (min-width: 650px) and (max-width: 770px){.td2{width:85%}}
@media screen and (min-width: 580px) and (max-width: 650px){.td2{width:95%;}}
@media only screen and (max-width: 580px){.td2{width:80%;}}


.td3 {width:100%;height:10%; border:px solid red;vertical-align:middle;}
@media only screen and (min-width: 1050px){.td3 {width:100%;height:3%; border:px solid red;vertical-align:middle;}}
@media screen and (min-width: 770px) and (max-width: 1050px){.td3{width:100%;height:10%; border:px solid red;vertical-align:middle;}}
@media screen and (min-width:650px) and (max-width: 770px){.td3{width:100%;height:10%; border:px solid red;vertical-align:middle;}}
@media screen and (min-width: 580px) and (max-width: 650px){.td3{width:20%; height:85%;border: px solid yellow;}}
@media only screen and (max-width: 580px){.td3{width:100%;height:10%; border:px solid red;vertical-align:middle;}}


.td4 {width: 100%;height:100%; border: px solid yellow;text-align: center; vertical-align: middle;}

.td5 {width:100%;height:auto; border:px solid blue;text-align: left; vertical-align:top;padding:0px;}
@media only screen and (min-width: 1050px){.td5 {width:100%; height:auto; border:0px solid red}}
@media screen and (min-width: 770px) and (max-width: 1050px){.td5{width:100%; height:auto;border: px solid red;}}
@media screen and (min-width: 650px) and (max-width: 770px){.td5{width:100%; height:auto;border: px solid yellow;}}
@media screen and (min-width: 580px) and (max-width: 650px){.td5{width:100%; height:auto;border: px solid yellow;}}
@media only screen and (max-width: 580px){.td5{width: 95%; height:auto; border:px solid blue;}}


.td6 {width: 85%;height:85%; border: px solid yellow;text-align: center; vertical-align: top;}
@media only screen and (min-width: 1050px){.td6 {width:10%; }}
@media screen and (min-width: 770px) and (max-width: 1050px){.td6{width:10%;}}
@media screen and (min-width: 650px) and (max-width: 770px){.td6{width:15%; }}
@media screen and (min-width: 580px) and (max-width: 650px){.td6{width:5%; }}
@media only screen and (max-width: 580px){.td6{width:5%; }}


.img0{width: 120px; height:120px;}
@media only screen and (min-width: 1050px){.img0 {width:100px; height:100px;}}
@media screen and (min-width: 770px) and (max-width: 1050px){.img0 {width: 80px; height:80px;}}
@media screen and (min-width: 650px) and (max-width: 770px){.img0 {width: 70px; height:70px;}}
@media screen and (min-width: 580px) and (max-width: 650px){.img0 {width: 60px; height:60px;}}
@media only screen and (max-width: 580px){.img0 {width: 50px; height:50px;}}


.img1{width: 30px; height:30px;}
@media only screen and (min-width: 1050px){.img1 {width:25px; height:25px;}}
@media screen and (min-width: 580px) and (max-width: 770px){.img1 {width: 20px; height:20px;}}
@media only screen and (max-width: 580px){.img1 {width: 20px; height:20px;}}

.img2{width:80px; height:80px;}
@media only screen and (min-width: 1050px){.img2 {width:100px; height:100px;}}
@media screen and (min-width: 580px) and (max-width: 770px){.img2 {width:50px; height:50px;}}
@media only screen and (max-width: 580px){.img2 {width: 60px; height:60px;}}

.img3{width:40em; height:40em;}
@media only screen and (min-width: 1050px){.img3 {width:70em; height:70em;}}
@media screen and (min-width: 770px) and (max-width: 1050px){.img3 {width:38em; height:38em;}}
@media screen and (min-width: 650px) and (max-width: 770px){.img3 {width:32em; height:32em;}}
@media screen and (min-width: 580px) and (max-width: 650px){.img3 {width:28em; height:28em;}}
@media only screen and (max-width: 580px){.img3 {width: 14em; height:14em;}}

.img4{width:150px; height:71px;}
@media only screen and (min-width: 1050px){.img4 {width:80px; height:30px;}}
@media screen and (min-width: 770px) and (max-width: 1050px){.img4 {width:80px; height:30px;}}
@media screen and (min-width: 650px) and (max-width: 770px){.img4 {width:80px; height:30px;}}
@media screen and (min-width: 580px) and (max-width: 650px){.img4 {width:80px; height:15px;}}
@media only screen and (max-width: 580px){.img4 {width: 50px; height:15px;}}

.img5{width:400px; height:250px;border:px solid blue;}
@media only screen and (min-width: 1050px){.img5 {width: 400px; height:250px;}}
@media screen and (min-width: 770px) and (max-width: 1050px){.img5 {width: 279px; height:186px;}}
@media screen and (min-width: 650px) and (max-width: 770px){.img5 {width: 270px; height:180px;}}
@media screen and (min-width: 580px) and (max-width: 650px){.img5 {width: 198px; height:132px;}}
@media only screen and (max-width: 580px){.img5 {width: 150px; height:94px;}}

.photos{width:270px; height:300px;border:px solid red;}
@media only screen and (min-width: 1050px){.photos {width:454px; height:504px;}}
@media screen and (min-width: 770px) and (max-width: 1050px){.photos {width:279px; height:305px;}}
@media screen and (min-width: 650px) and (max-width: 770px){.photos {width:270px; height:300px;}}
@media screen and (min-width: 580px) and (max-width: 650px){.photos {width:198px; height:220px;}}
@media only screen and (max-width: 580px){.photos {width: 90px; height:100px;}}


.photos2{width:270px; height:180px;border:px solid blue;}
@media only screen and (min-width: 1050px){.photos2 {width: 454px; height:302px;}}
@media screen and (min-width: 770px) and (max-width: 1050px){.photos2 {width: 279px; height:186px;}}
@media screen and (min-width: 650px) and (max-width: 770px){.photos2 {width: 270px; height:180px;}}
@media screen and (min-width: 580px) and (max-width: 650px){.photos2 {width: 198px; height:132px;}}
@media only screen and (max-width: 580px){.photos2 {width: 90px; height:60px;}}

h1 {
color: rgb(33,39,124);
text-align: center;
font-family:Calibris Light;
font-weight: ;
font-style:;
font-size:1.5em;
}
@media only screen and (min-width: 1050px){h1 {font-size: 3em;;}}
@media only screen and (max-width: 580px){h1 {font-size: 1.5em;}}


h2 {
color: rgb(33,39,124);
text-align: center;padding:10px;
font-family:Calibris Light ;
font-weight: bold;
font-style:italic;
font-size: 1em;
}
@media only screen and (min-width:1050px) {h2 {font-size:1.5em;}}
@media screen and (min-width: 770px) and (max-width: 1050px){h2 {font-size:1.5em;}}
@media screen and (min-width: 650px) and (max-width: 770px){h2 {font-size:1.25em; }}
@media screen and (min-width: 580px) and (max-width: 650px){h2 {font-size:0.85em;}}
@media only screen and (max-width: 580px){h2 {font-size: 0.75em;}}


h3 {color: rgb(33,39,124);
text-align: center;font-family:Script MT BOLD  ;font-size:2em;font-style:italic; font-weight:bold;padding:10px;}
@media only screen and (min-width:1050px) {
  h3 {font-size:2.5em;
  }}
  @media screen and (min-width: 770px) and (max-width: 1050px){
  h3 {font-size:2em;
  }}
  @media screen and (min-width: 650px) and (max-width: 770px){
  h3 {font-size:1.75em;
  }}
   @media screen and (min-width: 580px) and (max-width: 650px){
  h3 {font-size:1.75em;
  }}
@media only screen and (max-width: 580px) {
  h3 {font-size:1.5em;
  }}
 

  h4 {color: rgb(33,39,124);
text-align: center;font-family:Calibris Light;font-size:1.5em;font-style:italic; font-weight:bold;line-height:1.5em}
@media only screen and (min-width:1050px) {h4 {font-size:1.25em; }}
@media screen and (min-width: 770px) and (max-width: 1050px){
 h4 {font-size:1.25em;
  }}
 @media screen and (min-width: 650px) and (max-width: 770px){
 h4 {font-size:1.10em;
  }}
  @media screen and (min-width: 580px) and (max-width: 650px){
 h4 {font-size:0.85em;
  }}
@media only screen and (max-width: 580px) {h4 {font-size:0.70em;}}

  
hr{align:right; width:em;border:px solid rgb(00,00,45);}
@media only screen and (min-width:1050px) {
  hr {width:em;}}
@media only screen and (max-width: 580px) {
  hr {width:em;}}
  
  
p {
color: rgb(33,39,124);
font-family: Calibris Light;
text-align: justify;
font-size: 1.25em;line-height:1.5em ;border: 0px solid powderblue; padding: px; margin-right:1em;margin-left:1em;
font-style:italic;}
@media only screen and (min-width:1050px){ p{ font-size: 22px;line-height:1.5em ; }}
@media screen and (min-width: 770px) and (max-width: 1050px){p{ font-size: 22px;line-height:1.5em ; }}
@media screen and (min-width: 650px) and (max-width: 770px){p{ font-size: 20px;line-height:1.75em ; }}
@media screen and (min-width: 580px) and (max-width: 650px){p{ font-size: 16px;line-height:1.75em ; }}
@media only screen and (max-width: 580px){p{ font-size:16px; text-align:left;line-height:1.5em;margin-left:1em; margin-right:1em; }}


.para1 {
  text-align: left;
  font-size: 100%;
  font-weight:bold;
  font-style:normal;
  padding-left: 5px; margin: 0px;
}
@media only screen and (min-width:1050px){ .para1{ font-size: 1em;line-height:1.5em ;text-align: justify; }}
@media only screen and (max-width: 580px){.para1{ font-size: 0.50em;line-height:1.5em;margin-left:1em; margin-right:1em; }}


.para2 {
  text-align:justify;
  color:rgb(33,39,124);font-size: 120%;border: 0px solid powderblue; padding: px; margin: px;
font-style:italic;text-indent:0px;}

.para3 {
  text-align:left;
  color:rgb(33,39,124);font-size: 1em; line-height:1.5em ;border: 0px solid powderblue; padding: px; margin: px;
font-style:italic;}
@media only screen and (min-width:1050px){ .para3{ font-size: 1em;line-height:1.5em; }}
@media screen and (min-width: 580px) and (max-width: 770px){.para3{ font-size: 0.65em;line-height:1em ; }}
@media only screen and (max-width: 580px){.para3{ font-size: 0.50em;line-height:1.5em;margin-left:1em; margin-right:1em; }}
.para4 {
  text-align:center;
  color:rgb(33,39,124);font-size: 1em; line-height:1.5em ;border: 0px solid powderblue; padding: px; margin: px;
font-style:italic;}
@media only screen and (min-width:1050px){ .para3{ font-size: 1em;line-height:1.5em; }}
@media screen and (min-width: 580px) and (max-width: 770px){.para3{ font-size: 0.65em;line-height:1em ; }}
@media only screen and (max-width: 580px){.para3{ font-size: 0.50em;line-height:1.5em;margin-left:1em; margin-right:1em; }}
.para5{
color: rgb(33,39,124);
font-family: Calibris Light;
text-align: justify;
font-size: 1.25em;line-height:1.5em ;border: 0px solid powderblue; padding: px; margin-right:1em;margin-left:1em;
font-style:italic;}
@media only screen and (min-width:1050px){ .para5{ font-size: 18px;line-height:1.5em ; }}
@media screen and (min-width: 770px) and (max-width: 1050px){.para5{ font-size: 18px;line-height:1.5em ; }}
@media screen and (min-width: 650px) and (max-width: 770px){.para5{ font-size: 16px;line-height:1.75em ; }}
@media screen and (min-width: 580px) and (max-width: 650px){.para5{ font-size: 16px;line-height:1.75em ; }}
@media only screen and (max-width: 580px){.para5{ font-size:14px; text-align:left;line-height:1.5em;margin-left:1em; margin-right:1em; }}



div { width:80%;height:100%;border:px solid red;margin-left:auto;margin-right:auto;}
@media only screen and (min-width:1050px){div{ width:80%; }}
@media screen and (min-width:770px) and (max-width: 1050px){div { width:98%; }}
@media screen and (min-width: 650px) and (max-width: 770px){div {  width:98%;}}
@media screen and (min-width: 580px) and (max-width: 650px){div { width:98%;}}
@media only screen and (max-width: 580px){div { width:98%;margin-left:;margin-right:5px;}}
.div1{
  width: 100%;
  height:40em;
  overflow-y: scroll;
  border:px solid yellow;
  background-color:}
@media only screen and (min-width:1050px){.div1 { height:31em; border:px solid yellow; }}
@media screen and (min-width:770px) and (max-width: 1050px){.div1 { height:50em; }}
@media screen and (min-width: 650px) and (max-width: 770px){.div1 { height:35em; }}
@media screen and (min-width: 580px) and (max-width: 650px){.div1 { height:28em; }}
@media only screen and (max-width: 580px){.div1 { height:28em;}}

  
 .div2{
   height: 100%;
  width:50em;
  overflow-x: scroll;
  overflow-y:hidden;
 border:px solid yellow; }
@media only screen and (min-width:1050px){.div2 { width:65em;}}
@media only screen and (max-width: 580px){.div2 { width:13em;vertical-align:middle;}}

 .div3{ width:80%; height:auto; text-align: left;border:1px solid red;background-color:rgb(255,255,255);vertical-align:top;}
 @media only screen and (min-width:1050px){.div3 { width:80%; height:auto; text-align: left;border:px solid blue;background-color:rgb(255,255,255);vertical-align:top; }}
@media screen and (min-width: 770px) and (max-width: 1050px){.div3 { width:80%; height:auto; text-align: left;border:px solid yellow;background-color:rgb(255,255,255);}}
@media screen and (min-width: 650px) and (max-width: 770px){.div3 { width:90%; height:auto; text-align: left;border:px solid yellow;background-color:rgb(255,255,255);}}
@media screen and (min-width: 580px) and (max-width: 650px){.div3 { width:95%; height:auto; text-align: left;border:px solid yellow;background-color:rgb(255,255,255);}}
@media only screen and (max-width: 580px){.div3 { width:98%; height:auto; text-align: left;border:px solid black;background-color:rgb(255,255,255);}}


  .div4{width:100%; height:auto;text-align: center;border:px solid red;text-align:center;vertical-align:middle;}
  @media only screen and (min-width:1050px){.div4 {text-align:center;vertical-align:middle;}}
  @media screen and (min-width: 770px) and (max-width: 1050px){
  .div4 { width:100%;}}
  @media screen and (min-width: 580px) and (max-width: 770px){
  .div4 { width:100%;}}
@media only screen and (max-width:580px){.div4 { width:;}}


  .div5{ width:80%; height:auto; text-align: left;border:px solid blue;background-color:rgb(255,255,255);padding:10px;overflow-y: scroll;margin-left:auto;margin-right:auto;}
 @media only screen and (min-width:1050px){.div5 { width:60%; }}
@media screen and (min-width: 770px) and (max-width: 1050px){.div5 { width:80%;}}
@media screen and (min-width: 650px) and (max-width: 770px){.div5 { width:80%; }}
@media screen and (min-width: 580px) and (max-width: 650px){.div5 { width:80%;padding:5px;}}
@media only screen and (max-width: 580px){.div5 { width:90%;}}

  .div6{ width:80%; height:80%; border:px solid red;text-align: left;margin-left:0px; background-color:rgb(184,232,205);padding-left:150px;}
  @media only screen and (min-width:1050px){.div6 { width:80%; height:auto;border:px solid red;padding-left:200px; }}
   @media screen and (min-width: 770px) and (max-width: 1050px){
  .div6 { width:98%; height:100%;border:px solid red;padding-left:140px;}}
  @media screen and (min-width: 650px) and (max-width: 770px){
  .div6 { width:98%; height:100%;border:px solid red;padding-left:120px;}}
   @media screen and (min-width: 580px) and (max-width: 650px){
  .div6 { width:98%; height:100%;border:px solid red;padding-left:70px;}}
@media only screen and (max-width:580px){.div6 { width:100%;height:80%;float:left;border:px solid yellow;padding-left:20px;}}

.div7{ width:98%;height:auto;vertical-align:middle;text-align:left; padding-left:10px; border: px solid red; background-color:rgb(140,184,159);}
  
 
  iframe{width:98%;height:100%;text-align:center; border:none;}
input {
  width:30%;
  padding: px;
  margin: 2px;
  box-sizing: border-box;
  border: 1px solid rgb(33,39,124);
  border-radius:;
}
@media only screen and (min-width:1050px){input {  width:25em;
  }}
  @media screen and (min-width: 770px) and (max-width: 1050px){
  input {  width:25em;
  }}
  @media screen and (min-width: 650px) and (max-width: 770px){
  input {  width:20em;
  }}
@media screen and (min-width: 580px) and (max-width: 650px){
  input {  width:15em;
  }}
@media only screen and (max-width: 580px){input {  width:13em;
  }}
.input1 {
  width: 15%;
  padding:px px;
  margin: px px;
  box-sizing: border-box;
  margin-left:50px;
}
@media only screen and (min-width:1050px){.input1 {  width: 6em;
  }}
  @media screen and (min-width:770px) and (max-width: 1050px){
  .input1 {  width: 6em;margin-left:10px;
  }}
  @media screen and (min-width: 650px) and (max-width: 770px){
  .input1 {  width: 6em;margin-left:10px;
  }}
  @media screen and (min-width: 580px) and (max-width: 650px){
  .input1 {  width: 6em;margin-left:10px;
  }}
@media only screen and (max-width: 580px){.input1 {  width: 5em;margin-left:10px;
  }}
textarea {
  width: 80%;
   height:13em;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 1px solid rgb(33,39,124);
  border-radius: ;
  background-color:;
  resize: none;
  margin-left:50px;
  
}
@media only screen and (min-width:1050px){textarea {  height:16em;width: 60em;border: 1px solid rgb(33,39,124);
  }}
  @media screen and (min-width: 770px) and (max-width: 1050px){
 textarea {  height: 20em;width: 38em;margin-left:10px;
  }}
  @media screen and (min-width: 650px) and (max-width: 770px){
 textarea {  height: 20em;width: 32em;margin-left:10px;
  }}
  @media screen and (min-width: 580px) and (max-width: 650px){
 textarea {  height: 13em;width: 30em;margin-left:10px;
  }}
@media only screen and (max-width: 580px){textarea {  height: 8em;width: 16em; margin-left:10px;
  }}


//Menu vertical
.nav1 {
  width: ;
  color: rgb(33,39,124) ;
  font-family:Calibris Light;font-size:100%; font-style:;font-weight:bold;
  list-style:square ;
  margin:px;
  padding-left: 5px;
}
.nav1 li {
	width: ;
  background:  ;
  color: rgb(33,39,124) ;
  font-family:Calibris Light;font-size:100%; font-style:;font-weight:bold;
  border:  ;
  margin-bottom: 1px ;
}
.nav1 li a {
  display: block ;
  background:  ;
  color: rgb(33,39,124) ;
  font-family:Calibris Light;font-size:0.90em; font-style:;font-weight:bold;
  line-height: 1.25em ;
  text-align: left ;
  text-decoration: none ;
  padding: px ;padding-left:px;
}
@media only screen and (min-width:1050px){.nav1 li a { display: block ;
  background:  ;
  color: rgb(33,39,124) ;
  font-family:Calibris Light;font-size:20px; font-style:;font-weight:bold;
  line-height: 1.25em ;
  text-align: left ;
  text-decoration: none ;
  padding: px ;padding-left:px;
  }}
   @media screen and (min-width: 770px) and (max-width: 1050px){.nav1 li a { display: block ;
  background:  ;
  color: rgb(33,39,124) ;
  font-family:Calibris Light;font-size:0.85em; font-style:;font-weight:bold;
  line-height: O.5em ;
  text-align: left ;
  text-decoration: none ;
  padding: px ;padding-left:px;}}
   @media screen and (min-width: 650px) and (max-width: 770px){.nav1 li a { display: block ;
  background:  ;
  color: rgb(33,39,124) ;
  font-family:Calibris Light;font-size:0.75em; font-style:;font-weight:bold;
  line-height: 1.5em;
  text-align: left ;
  text-decoration: none ;
  padding: px ;padding-left:px;}}
   @media screen and (min-width: 580px) and (max-width: 650px){.nav1 li a { display: block ;
  background:  ;
  color: rgb(33,39,124) ;
  font-family:Calibris Light;font-size:0.60em; font-style:;font-weight:bold;
  line-height: O.5em ;
  text-align: left ;
  text-decoration: none ;
  padding: px ;padding-left:px;}}
@media only screen and (max-width: 580px){.nav1 li a { display: block ;
  background:  ;
  color: rgb(33,39,124) ;
  font-family:Calibris Light;font-size:16px; font-style:;font-weight:bold;
  line-height: 0.75em ;
  text-align: left ;
  text-decoration: none ;
  padding: px ;padding-left:px;
  }}

.nav1 li a:hover, .navigation li a:focus, .navigation li a:active {
  background: blue ;
  text-decoration: ;
}
    .nav2{
  width: ;
  color: rgb(33,39,124) ;
  font-family:Calibris Light;font-size:100%; font-style:;font-weight:bold;
  list-style:none ;
  margin:px;
  padding-left: 10px;
}
.nav2 li {
	width: ;
  background:  ;
  color: rgb(33,39,124) ;
  font-family:Calibris Light;font-size:100%; font-style:;font-weight:bold;
  border:  ;
  margin-bottom: 1px ;
}
.nav2 li a {
  display: block ;
  background:  ;
  color: rgb(33,39,124) ;
  font-family:Calibris Light;font-size:0.90em; font-style:;font-weight:bold;
  line-height: 1.25em ;
  text-align: left ;
  text-decoration: none ;
  padding: px ;padding-left:px;}
@media only screen and (min-width:1050px){.nav2 li a { display: block ;
  background:  ;
  color: rgb(33,39,124) ;
  font-family:Calibris Light;font-size:1.25em; font-style:;font-weight:bold;
  line-height: 1.75em ;
  text-align: left ;
  text-decoration: none ;
  padding: px ;padding-left:px;}}
  @media screen and (min-width: 770px) and (max-width: 1050px){.nav2 li a { display: block ;
  background:  ;
  color: rgb(33,39,124) ;
  font-family:Calibris Light;font-size:0.90em; font-style:;font-weight:bold;
  line-height: 2em ;
  text-align: left ;
  text-decoration: none ;
  padding: px ;padding-left:px;}}
  @media screen and (min-width: 650px) and (max-width: 770px){.nav2 li a { display: block ;
  background:  ;
  color: rgb(33,39,124) ;
  font-family:Calibris Light;font-size:0.80em; font-style:;font-weight:bold;
  line-height: 2.5em ;
  text-align: left ;
  text-decoration: none ;
  padding: px ;padding-left:px;}}
  @media screen and (min-width: 580px) and (max-width: 650px){.nav2 li a { display: block ;
  background:  ;
  color: rgb(33,39,124) ;
  font-family:Calibris Light;font-size:0.70em; font-style:;font-weight:bold;
  line-height: 1.5em ;
  text-align: left ;
  text-decoration: none ;
  padding: px ;padding-left:px;}}
  @media only screen and (max-width: 580px){.nav2 li a { display: block ;
  background:  ;
  color: rgb(33,39,124) ;
  font-family:Calibris Light;font-size:0.60em; font-style:;font-weight:bold;
  line-height: 2em;
  text-align: left ;
  text-decoration: none ;
  padding: px ;padding-left:px;
  }}
  
.nav2 li a:hover, .navigation li a:focus, .navigation li a:active {
  background: blue ;
  text-decoration: ;
}

.ul1 li{list-style-type:none;color: rgb(33,39,124);
  font-family:Calibris Light;display : inline-block;font-size:100%; font-style:none;font-weight:bold;text-align:left;}
@media only screen and (min-width: 1050px){.ul1 li{list-style-type:none; display : inline-block; font-size:1em;  line-height: 1.20em ;}}
@media screen and (min-width: 770px) and (max-width: 1050px){.ul1 li{list-style-type:none;display : inline-block; font-size:1em;  line-height: 1.20em ;text-align:center;}}
@media screen and (min-width: 650px) and (max-width: 770px){.ul1 li{list-style-type:none;display :block; font-size:1em;  line-height: 1.20em ;text-align:left;}}
@media screen and (min-width: 580px) and (max-width: 650px){.ul1 li{list-style-type:none;display : inline-block; font-size:1em;  line-height: 1.20em ;text-align:center;}}
@media only screen and (max-width: 580px){.ul1 li{list-style-type:none;display :block;font-size:0.45em;  line-height: 1.50em ;text-align:left;}}
}}

marquee{direction:left;height:auto; width:60%; font-family:Calibris Light; font-weight:bold;font-style:italic; color:rgb(33,39,124);font-size:;}
.marq1{direction:left;height:auto; width:60%; font-family:Calibris Light; font-weight:bold;font-style:italic; color:rgb(33,39,124);font-size:1.5em;}
@media only screen and (min-width: 1050px){.marq1 {font-size:1.25em;}}
 @media screen and (min-width: 770px) and (max-width: 1050px){.marq1 {font-size:16px;}}
 @media screen and (min-width: 650px) and (max-width: 770px){.marq1 {font-size:14px;}}
 @media screen and (min-width: 580px) and (max-width: 650px){.marq1 {font-size:14px;}}
@media only screen and (max-width: 580px){.marq1 {font-size:14px;}}


video {width:1O0%;height:auto;border:px solid green;}
@media only screen and (min-width:1050px){video { width:100%;height:90%;
  }}
  @media screen and (min-width: 770px) and (max-width: 1050px){video { width:100%; }}
  @media screen and (min-width: 650px) and (max-width: 770px){video { width:100%; }}
  @media screen and (min-width: 580px) and (max-width: 650px){video { width:80%; }}
@media only screen and (max-width: 580px){video { width:100%;height: 100%;
  }}
  table{width: 100%; height: 100vh;
}
.tab1{width: 100%; height: 20vh;border:px solid green;text-align: left; margin-left: auto; margin-right: auto;margin-bottom:0px;}
@media only screen and (min-width: 1050px){.tab1 {height: 10vh;}}
@media only screen and (min-width: 770px)and (max-width: 1050px){.tab1 {height: 8vh;}}
@media only screen and (min-width: 650px)and (max-width: 770px){.tab1 {height: 8vh;}}
@media only screen and (min-width: 580px)and (max-width: 650px){.tab1 {height: 8vh;}}
@media only screen and (max-width: 580px){.tab1 {height: 10vh;}}

.tab2{width: 100%; height: 73vh;border:px solid blue;text-align: left;margin-left: auto; margin-right: auto; }
@media only screen and (min-width: 1050px){.tab2 {height: 83vh;}}
@media only screen and (min-width: 770px)and (max-width: 1050px){.tab2 {height: 88vh; }}
@media only screen and (min-width: 650px)and (max-width: 770px){.tab2 {height: 84vh; }}
@media only screen and (min-width: 580px)and (max-width: 650px){.tab2 {height: 86vh; }}
@media only screen and (max-width: 580px){.tab2 {height:82vh;}}

  
  :root{
  --hauteur-menu: 30px;
}
* {
  margin: 0px;
  padding: 0px;
  font-family: Montserrat, sans-serif;
}
nav {
  width: 15%;height:7vh;height:8%;
  font-size: 18 px;
  position: sticky;
  top: 0px;
  border:px solid red;
  vertical-align:bottom;
}
@media only screen and (min-width: 1050px){nav { width: 15%; font-size:16px;height:7vh;}}
@media only screen and (min-width: 770px)and (max-width: 1050px){nav { width: 25%; font-size:14px;height:4vh;}}
@media only screen and (min-width: 650px)and (max-width: 770px){nav { width: 25%; font-size:14px;height:8vh;}}
@media only screen and (min-width: 580px)and (max-width: 650px){nav { width: 25%; font-size:12px;height:6vh;}}
@media only screen and (max-width: 580px){nav { width: 40%; font-size:12px;height:8vh;}}

nav > ul {
  display: flex;
  text-align: center;
  box-shadow: 0px px px px rgba(0,0,0,0.3);
  height: var(--hauteur-menu);
}
 
nav ul {
  list-style-type: none;
}

nav > ul > li {
  background-color: rgb(184,232,205);
  position: relative;
  height: 100%;
  flex: 1;
  font-size:16px;
  font-weight:bold;
  padding-left:0px
  border:px solid red;
}
@media only screen and (min-width:1050px){nav > ul > li { font-size:16px;}}
  @media screen and (min-width: 770px) and (max-width: 1050px){nav > ul > li { font-size:16px;}}
  @media screen and (min-width: 650px) and (max-width: 770px){nav > ul > li{ font-size:14px;}}
  @media screen and (min-width: 580px) and (max-width: 650px){nav > ul > li { font-size:14px;}}
@media only screen and (max-width: 580px){nav > ul > li { font-size:12px;}}

nav > ul > li > a { 
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  font-size:;
}

li a {
  text-decoration: none;
  color: rgb(33,39,124);
}

.menu-deroulant > a:after{
  content:'' ;
  font-size: 18px;
  margin-left: 2px;
  display: inline-block;
}
.sous-menu {
  margin-top: var(--hauteur-menu);
  width: 80%;
  text-align: left;
  background-color: rgba(184,232,205, 1);
  border-radius: 2px;
  overflow: hidden;
  max-height: 0;
}
@media only screen and (max-width: 580px){.sous-menu  { width:100%;}}

.sous-menu > li > a {
  height: 35px;
  padding-left: 15px;
  width: 100%;
  align-items: center;
  display: flex;
}
@media only screen and (min-width:1050px){.sous-menu > li > a { height: 30px;}}
  @media screen and (min-width: 770px) and (max-width: 1050px){.sous-menu > li > a { height: 30px;}}
  @media screen and (min-width: 650px) and (max-width: 770px){.sous-menu > li > a { height: 35px;}}
  @media screen and (min-width: 580px) and (max-width: 650px){.sous-menu > li > a  { height:20px;}}
@media only screen and (max-width: 580px){.sous-menu > li > a  { height: 25px;padding-left: 10px;}}
nav > ul > li:hover > a{
  color: #2169EC;
}
.sous-menu > li:hover {
  background-color: rgba(33, 105, 236, 0.9);
}

.sous-menu > li:hover > a {
  color: white;
}
@keyframes rotationFleche {
  0% {
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(90deg);
  }
}
.menu-deroulant:hover > a:after{
  animation: rotationFleche 0.2s linear forwards;
}
@keyframes apparitionSousMenu {
  0% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0);
    border-top: 3px solid #2169EC;
  }
  30% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
  100% {
    max-height: 50em;
    border-top: 3px solid #2169EC;
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
}
.menu-deroulant:hover > .sous-menu {
  animation: apparitionSousMenu 1s forwards;
}