::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    display: block;
}

a {text-decoration:none; font-weight:200; color:white;}

a:hover {text-decoration:none; font-weight:200; color:grey;}

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 10px;
border-color:#0c099d;
} 

.shadow {
    box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(200, 200, 200, 0.2);
}

.shadow2 {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

.radius {
    border-radius: 2vh;
}

.button {
padding: 5px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #ffffff;
    background-color: #0c099d;
    border: none;
    border-radius: 15px;
    text-transform: uppercase;
    width: 80%;
	margin-left:10%;
    display: block;
    margin-top: 2vh;
	 margin-bottom: 2vh;
    font-family: 'Oswald';
}

.button:hover {background-color: red;
    color: #ffffff;}
	
	.button2 {
padding: 5px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #ffffff;
    background-color: orange;
    border: none;
    border-radius: 15px;
    text-transform: uppercase;
    width: 80%;
	margin-left:10%;
    display: block;
    margin-top: 2vh;
	 margin-bottom: 2vh;
    font-family: 'Oswald';
}

.button2:hover {background-color: gold;
    color: #ffffff;}

.bubble {
  --r: 25px; /* the radius */
  --t: 30px; /* the size of the tail */
  
  max-width: 40vw;
  padding: calc(2*var(--r)/3);
  -webkit-mask: 
    radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%) 
      var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
    conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) 
      calc(var(--r)/-2) calc(var(--r)/-2) padding-box, 
    radial-gradient(50% 50%,#000 98%,#0000 101%) 
      0 0/var(--r) var(--r) space padding-box;
  background: linear-gradient(135deg,#fe0000,#dae318) border-box;
  color: #fff;
}
.left {
  --_d: 0%;
  border-left: var(--t) solid #0000;
  margin-right: var(--t);
  place-self: start;
  margin-right: 30%;
}
.right {
  --_d: 100%;
  border-right: var(--t) solid #0000;
  margin-left: var(--t);
  place-self: end;
  margin-left: 30%;
}

#BB {
  margin: 0;
  display: grid;
  place-content: center;
  gap: 20px;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  text-transform: uppercase;
}

#Diapo

{	

background: linear-gradient(-45deg, #f16b21, #b00e0e, #e47131, #fffc09);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
    height: auto;
	width: 90%;
    margin-left: 5%;
    border-radius: 3vh;
}
.tClassA {
  position: relative;
  font-size:4em;
  font-weight:600;
  color:white;
  padding:2vh 0 2vh 0;
  font-family: 'Roboto', sans-serif;
  background-color: #0000006b;
  /*border-style: solid;
  border-width: 5px;
  border-color:white;*/
  width: 100%;

}
	
	


#Contact

{	

background: linear-gradient(-45deg, #fcbc5d, #906c39, #ff8600, #9faaac);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
    height: auto;
    overflow: hidden;
    max-width: 100vw;
	    width: 90%;
    margin-left: 5%;
    border-radius: 3vh;
    margin-bottom: 2%;

	
	
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

#SectionContact

{	
    height: auto;
    min-width: 80vw;
    max-width: 80vw;
    margin-left: 5vw;
    padding: 10px;
    position: relative;
}




/* Container for flexboxes */
.rowCONTACT {
	display: flex;
    flex-wrap: wrap;
    width: 80vw;
    position: relative;
}

/* Create two equal columns */
.columnCONTACT {
    flex: 40%;
    padding: 20px;
    display: flex;
    justify-content: center;
}

input {
width: 90%;
    padding: 6px 10px;
    margin: 8px 0;
    box-sizing: border-box;
    margin-left: 0%;
    background-color: transparent;
    color: #fff;
    border: solid #fff 3px;
	 border-radius: 2vh;
}

input::placeholder {
font-style: italic;
color:white;
}

textarea {
width: 90%;
    padding: 6px 10px;
    margin: 8px 0;
    box-sizing: border-box;
    margin-left: 0%;
    background-color: transparent;
    color: #fff;
    border: solid #fff 3px;
	 border-radius: 2vh;
}

textarea::placeholder {
font-style: italic;
color:white;
}

.ButtonForm {
    background-color: transparent;
    border: 3px solid white;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 50px;
    width: 90%;
    margin-left: 0%;
}

.ButtonForm:hover {background-color: grey;}

#bureau
{	
background-color: black; /* Used if the image is unavailable */
background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  min-height: 25vh; /* You must set a specified height */
  color:white;
}


/*  Galaxy Fold*/

@media only screen and (max-width: 359px)
{
  
.mapouter {
display: none;	
	
}



}

/* smartphone*/
@media only screen and (min-width: 360px) and (max-width:379px) 
{
  
.mapouter {
display: none;	
	
}


}
/* smartphone*/
@media only screen and (min-width: 380px) and (max-width:480px) 
{
.mapouter {
display: none;	
	
}

}



/* tablet*/
@media only screen and (min-width: 481px) and (max-width:767px) and (orientation: portrait)
{
.A {
margin-top: -30vw;	
margin-left: 0vw;	
}

.tClassA {
  font-size:1.5em;
   text-align:center;
   }

.sClassA {
  font-size:1em;
  text-align:center;
}

.ClassA {
  font-size:1em;
   text-align:center;
}


}
/* tablet*/
@media only screen and (min-width: 481px) and (max-width:768px) and (orientation: landscape)
{
.A {
margin-top: -20vw;	
margin-left: 0vw;	
}

.tClassA {
  font-size:2.5em;
   text-align:center;
   width:fit-content;
   }

.sClassA {
  font-size:1.5em;
  text-align:center;
}

.ClassA {
  font-size:1em;
   text-align:center;
}




}



/* tablet */
@media only screen and (min-width: 768px)  and (max-width:1023px) and (orientation: portrait)
{

.A {
margin-top: -30vw;	
margin-left: 0vw;	
}

.tClassA {
  font-size:2.5em;
   text-align:center;
   }

.sClassA {
  font-size:1.5em;
  text-align:center;
}

.ClassA {
  font-size:1em;
   text-align:center;
}

}


/* laptop or large smartphone landscape*/
@media only screen and (min-width: 769px)  and (max-width:1023px) and (orientation: landscape)
{

.A {
margin-top: -20vw;	
margin-left: 0vw;	
}

.tClassA {
  font-size:2.5em;
   text-align:center;
      width:fit-content;

   }

.sClassA {
  font-size:1.5em;
  text-align:center;
}

.ClassA {
  font-size:1em;
   text-align:center;
}



}

/* large tablet portrait*/
@media only screen and (min-width: 1024px)  and (max-width:1200px) and (orientation: portrait) 
{
	
	.A {
margin-top: -30vw;	
margin-left: 0vw;	
}

.tClassA {
  font-size:3.5em;
   /*text-align:center;*/
   }

.sClassA {
  font-size:2.5em;
 /* text-align:center;*/
}

.ClassA {
  font-size:1em;
   text-align:center;
}


}
/* desktop*/
@media only screen and (min-width: 1024px)  and (max-width:1200px) and (orientation: landscape)
{

	.A {
margin-top: -30vw;	
margin-left: 0vw;	
}

.tClassA {
  font-size:3.5em;
   /*text-align:center;*/
   }

.sClassA {
  font-size:2.5em;
 /* text-align:center;*/
}

.ClassA {
  font-size:1em;
   text-align:center;
}


}
/* XL screen*/

@media only screen and (min-width: 1201px) 
{


}