:root 
{
    --red: #d70e15;
    --red-op: rgba(40,40,40,0.15);
    --lightgray: #DBDADA;
    --gray: #9D9C9C;
    --darkgray: rgb(40, 40, 40);

    line-height: 1.5rem;
    font-weight: 400;
  
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

html
{
  height: 100%;
}

body 
{
  height: auto;
  color: black;
  background: rgb(142,142,142);
  background: linear-gradient(145deg, rgb(145, 143, 143) 0%, rgb(231, 231, 231) 50%, rgb(244, 242, 242) 75%, rgb(142, 142, 142) 100%); 
  background-attachment: fixed;
  font-family: 'Teko', sans-serif;
}

h1
{
  font-size: 4rem;
  color: var(--red);
  text-shadow: -2px 0px var(--darkgray);
  line-height: 4rem;
}

ul
{
  list-style: none;
  color: var(--darkgray);
}

.main
{
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content:start;
  min-height: 100%;
  /*max-height: -webkit-fill-available;*/
  background-image: url('img/line.svg');
  background-repeat: no-repeat;
  background-size:cover; 
}

.top
{
  z-index: 2;
}

.logo
{
  max-width: 650px;

}

.bg-red
{
  background-color: rgba(40,40,40,0.15);
}

.pic
{
  z-index: 4;
}

.img-position
{
  text-align: left;
}

.img-shadow
{
  width: 100%;
  box-shadow: 10px 6px var(--gray);
  /*-ms-transform: skewX(-20deg);  IE 9 
  transform: skewX(-20deg);*/
}


.tel 
{
  font-weight: 500;
  font-size: 3.6rem;
  border-top: solid thin var(--red);
  line-height: 1;
}

.email
{
  font-size: 1.6rem;
}

.team
{
  font-size: 1.6rem;
  line-height: 1.6rem;
}

.ville
{
  font-size: 2.4rem;
  line-height: 2.4rem;
  font-weight: 500;
  color: var(--red);
  text-shadow: -1px 0px var(--darkgray);
}

.ville-container
{
  border-top: solid thin #9D9C9C;
  border-bottom: solid thin #9D9C9C;
}

.description
{
  font-size: 2.1rem;
  line-height: 2.1rem;
  text-align: start;
}

.liste
{
  font-size: 1.8rem;
  line-height: 1.8rem;
  text-align: end;
}

.email a
{
  text-decoration: none;
  color: black;  
}

.footer
{
  /*margin-top: -80px;*/
  position: relative;
  bottom: 0;
  overflow: hidden;
  min-width: 100%;
  z-index: 0;
}

.footer img 
{
  width: 100%;
}

.credit
{
  position:absolute; 
  bottom:8px; 
  padding-left:12px;
  color:var(--gray);
}

.credit a
{
  text-decoration: none;
  color:var(--gray);
}

@media only screen and (max-width: 767px) 
{

  html, body
  {
    height: auto;
  }
  h1
  {
    font-size: 2.6rem;
    line-height: 2.6rem;
    text-align: center;
  }

  .main
  {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content:start;
    min-height: 100%;
    background-image: url('img/line.svg');
    background-repeat: no-repeat;
    background-size: cover; 
    background-position: 20% 0%;
  }

  .bg-red
  {
    background-color: rgba(40,40,40,0.1);
  }

  .img-position
  {
    text-align: center;
    padding-bottom: 25px;
  }

  .img-shadow
  {
    width: 80%;
    box-shadow: 10px 6px var(--gray);
    /*-ms-transform: skewX(-20deg);  IE 9 
    transform: skewX(-20deg);*/
  }

  .description
  {
    font-size: 2.1rem;
    line-height: 2.1rem;
    text-align: center;
    padding-bottom: 75px;
  }

  .liste
  {
    font-size: 1.8rem;
    line-height: 1.8rem;
    text-align: center;
  }

  .footer
  {
    /*margin-top: -80px;*/
    position: relative;
    bottom: 0;
    overflow: hidden;
    min-width: 100%;
    z-index: 0;
  }

  
  .credit
  {
    padding-left:10px;
    bottom:20px;
  }
}