h1, h2, h3, h4, h5
 {
  font-family: 'Righteous', sans-serif;
 }

h1, h2, h3
 {
  color: rgba(255,255,255);
 }

 h4, h5
 {
  color: rgba(20,20,20);
 }
 h4
 {
  padding-left:70px;
  border-width: 4px;
  border-color: white
 }

 h1
 {
 font-size: 5vw;
 }
 h2
 {
 font-size: 3vw;
 }
 .boxcontent
{
  display: flex;
  justify-content: center;
  align-items: center;
}

 @media only screen and (max-width: 600px) {
   h4
   {
    padding-left:0px;
    text-align: center;
    border-color: white
   }
   .boxcontent
  {
    display:block;
    justify-content: center;
    align-items: center;
  }
 }
 

body
{
  background-color: rgba(58,58,58);
  font-family: 'Quicksand', sans-serif;
}
.logo
{
  padding: 50px;
}


.navbar-expand-lg
{
  display: flex;
  justify-content: space-around;
  font-size: 15px;
  position: fixed;
  top: 0;
  width: 100%;
}

.logonav
{
  margin: 0px 75px;
}

.presentation
{
display: flex;
justify-content: center;

}



.nav-link
{
    transition-duration: 0.3s;
    color: rgba(40,40,40);
    font-weight: bolder;
}

.nav-link:hover
{
  background-color:rgba(255,255,255,0.5);
  border-radius: 50px;
    transition-duration: 0.3s;
}

.competences
{
  display: flex;   

  justify-content: center;
}

.description
{
  margin-top:1%;
  margin-bottom: 1%;
  color: #202020;
  background-color: rgba(221, 221, 221, 0.8);
  border-radius: 10px;
  padding: 1%;
  width:80%;
}

.boxcontent > img
{
  margin : 3%;
  border-radius: 3px;
}

h3
{
font-size: 24px;
}

.box-type1
{
 background-color: hwb(192 48% 13% / 0.6);
  
}

.box-type2
{
  background-color:  rgba(121,121,121,0.6);
}

.box-type1 , .box-type2
{
  color: #DDDDDD;
}


.image
{
  margin:2%;
  border-radius: 10px;
  height: 432px;
  width: 768px;
  max-width: 768px;
  min-width: 384px;
  text-align: center;
  transition: .2s,background-position 0s;
}

.image > .imagedesc {
  border-radius:  10px 10px 0px 0px;
  color: rgba(255, 0, 0, 0);
  padding-top: 3%;
  padding-bottom: 3%;
  background: linear-gradient(rgba(58, 58, 58, 0.692) 0 0) left / var(--p,0) no-repeat;
  transition: .4s,background-position 0s;
}

.image:hover {
  --p: 100%;
}

.image:hover > .imagedesc{

  --p: 100%;
  background-position: right;
  color: rgb(255, 255, 255);
}

.goWork
{
  margin: 0px 640px;
  padding: 10px 10px;

  border-radius: 70px;

  border-color: white;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

.goWork:hover
{
  box-shadow: 0px 5px 1px 0px rgba(10,10,10,0.4);
      -webkit-transform:scale(1.1);

      transform:scale(1.1);
}

.desc , .descr
{
  border-radius: 20px;
}

footer
{
  text-align: center;
  color: white;
}


.iconheader
{

  margin:0px 10px;
    background-size:cover;
}

.brandlink
{
display: flex;
justify-content:center;
margin-bottom: 20px;
}

a, a:hover
{
  color:black;
}


iframe, .iframe
{
  border-color: #888888;
  border: 7px solid;
  border-radius: 20px;
}

.card-header, .bord
 {
 background:  rgb(123, 203, 223);
 }




.price
{
  display: flex;
  justify-content:center;
}

.hovering {
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0,1,0.27,1.5);
}
.hovering:hover
{
  rotate: 0.8deg;
  transform: scale(1.08);
  box-shadow: 0px 20px 5px rgba(32, 32, 32, 0.3);
}

.card-header, .card-title, .card-text, .card-body
{
  text-align: center;
  color:black;
}

.card-text
{
  font-size: 12px;
}


.navbar-brand
{
  color: rgba(40,40,40);
  font-weight: bolder;
}

.row2
{
  display: flex;
  justify-content:space-around;
}

.entete {
  margin-top: 75px;
}

nav {
  background-color: rgb(123, 203, 223);
}

table, th, td {
  text-align: center;
  border: solid 1px;
}

@media only screen and (max-width: 920px) {
  table {
    font-size: 50%;
  }
}

th {
  color: #222;
  background-color: #ddddddb7;
}

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {
  transform: scale(1.2);
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 1000px;
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

.modal-content,
#caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}