/* Naviguation style */


.nav-bar {
  background-color:#37717C ;
  color: #FFF9EF ;
    height: 50px;
    align-content: center;
  font-size: larger;
    font-weight: 500;
font-family: "Roboto Flex";

}


.nav {
  display: flex;
  justify-content: space-evenly;
 list-style: none;

}



.sous1, .sous2 {
  position: relative;
background-color:rgba(55, 113, 124, 80%);

padding-inline: 10%;
padding-top: 3%;
text-align: center;
list-style: none;
right: 25%;
border-bottom: #EFECE9 2px solid;
display: none;
}

.sous1 {
width:150px;
}

.sous2 {
  width: 120px;
}


.nav :hover .sous2, .nav :hover .sous1  {
  display: block;
}

.nav li {
cursor: pointer;

}

#navelement1{
  font-family: "syne";
  
}

nav li :hover {
  font-size: 101%;
  
}

.nav-bar a { text-decoration: none;
  color: #FFF9EF ;
}

/* footer style */

footer {
  background-color: #37717C;
  display: flex;
  color:#EFECE9 ;
      align-content: center;
  font-size: larger;
  justify-content: center;
  font-weight: 600;
font-family: "Roboto Flex";
padding-bottom: 20px;
}

footer img {
  width: 25px;
  height: 25px;
}

.menu-footer1, .menu-footer2, .menu-footer3 {
  border-right: 2px solid ;
}

footer li {
  padding-right: 10px;
  list-style: none;
  cursor: pointer;
}

footer li :hover {
  font-size: 101%;
  
}

footer a { text-decoration: none;
  color: #FFF9EF ;
}

/* Home style Général*/

body {margin: 0;
background-color:#EFECE9 ;

}

h2 { 
  font-family: "Syne";
  font-size: 35px;
  
}

p { 
font-family: "Roboto Flex";
font-size: 20px;
font-weight:600;

}



/*Page UXUI style part 1*/

.Allelement1{
display: flex;
flex-direction: column;

align-items: center;
}

#UXUItitre{
color: #9E7757;
padding: 5% 0% 0% 7%;
font-family: "Syne";
  font-size: 40px;
}

#UXprez {
  display: flex;
  flex-direction: column;
 align-items: center;
}

#OBJ {
  color: #9E7757;
 
  margin-left: 41%;
}


.UXcontent{
    display: flex;
    flex-direction: row;
}

.UXcontent img {
    width: 400px;
    margin-right: 5%;
}

.UXtext {
  background-color: #9E7757;
  width: 70% ;
  height: 200px;
  color: #EFECE9;
  text-align: justify;

font-family: "Roboto Flex";
font-size: 20px;
font-weight:600;
padding: 3%;
margin-bottom: 3%;
 

}

/*Page UXUI style part 2*/

.UXcartes img {
width: 500px;
padding: 2%;
}

.UXcartes {
  margin: 2%;
}


#UXui1 {
 color: #37717C;
 
 
}

.UXaxsol h3 {
  color: #37717C;
}

.UXaxsol {
  display: flex;
  flex-direction: row;
 
}

#UXdetail {
  border: #37717C 2px solid;
  position: relative;
  margin-left: 2%;
  padding: 3%;
  color: #9E7757;
}


/*Page UXUI style part 3*/

.Uxportfolio {
  
  background-color: #37717C;
  color: #EFECE9;
  padding: 2%;
  width: 94%;
}


#UXportfolio1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
 
}

#UXportfolio2 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
   
}

.UXportfoliotext {
  width: 500px;
  padding: 5% 2% 0% 2%;
}

.portfimage {
  height: 400px;
  border: #EFECE9 5px solid;
  overflow: hidden;
 overflow-y: scroll;
}


/*Page UXUI style part 3*/

#Projetbreakfirst{
   display: flex;
  flex-direction: row;
  justify-content: space-evenly;
padding: 5%;
}


#Projetunclej {

  display: flex;
  flex-direction: row-reverse;
  justify-content: space-evenly;
padding: 5%;
}


#Projetunclej img {
  margin-right: 10%;
  height: 700px;
}

#Projetbreakfirst img {
  margin-left: 10%;
  height: 700px;
}



#UXportfolio3 h2 {
  color: #37717C;
}

#UXportfolio3 h3 {
  font-size: 30px;
}


#UXportfolio3 h3, #UXportfolio3 p {
 width: 350px;
  color: #9E7757;
 
}


#Projetbreakfirst h3, #Projetbreakfirst p {
 text-align: left;
}

#Projetunclej h3, #Projetunclej p {
 text-align: right;
 
}