* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    @font-face {
      font-family: "OxygenMono";
      src: url("/css/fonts/OxygenMono-Regular.ttf");
      size-adjust: 100%;
    }

    @font-face {
      font-family: "HARLOWSI";
      src: url("/css/fonts/HARLOWSI.TTF");
      size-adjust: 100%;
    }

    @keyframes changeBg {

        0% { background: #e4dcd3; }
        25% { background: #eeebd2; }
        50% { background: #f1c8a6; }
        75% { background: #e0c996; }
        100% { background: #ddd3bb; }

    }

    html {
        margin: 0;
        padding : 0;
    }

    @keyframes blink {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .blinking-text {
        text-align: center;
        font-size: 18px;
        color: firebrick;
        animation: blink 1s infinite;
    }

        hr {
      border: 10px solid gray;
      border-radius: 5px;
    }

     a {
       text-decoration:none;
       color:rgb(51,0,0);
    }

    a:hover {
       text-decoration:underline;
    }

    a:visited {
       text-decoration:none;
       border:none;
       color:rgb(51,0,0);
    }

    a:active {
       text-decoration:none;
       border:none;
       color:rgb(51,0,0);
    }

    h1{
       color:rgba(115, 40, 13, 0.74);
    }

    h2{
       color:maroon;
    }



    #Liens {
        text-decoration:none;
        background-color:rgb(255, 160, 122);
        padding:4px;
        border:1px dotted #DC143C;
        -border-radius: 12px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        padding:6px;
        cursor:pointer;
    }

    #Liens:hover {
        text-decoration:none;
        background-color:#FFDAB9;
        padding:4px;
        border:1px solid #DC143C;
        -border-radius: 12px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        padding:6px;
        cursor:pointer;
    }

    #LienMail {
        text-decoration:none;
        background-color:#DCDCDC;
        border:1px dotted gray;
        padding:2px;
        -border-radius: 12px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        cursor:pointer;
        text-align:center;
    }

    #LienMail:hover {
        text-decoration:none;
        background-color:#F5DEB3;
        padding:2px;
        border:1px dotted black;
        -border-radius: 12px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        cursor:pointer;
        text-align:center;
    }
    
    .zoom {
      margin: 0 auto;
    }

    .zoom:hover {
        transition: transform 1s, filter .5s ease-out; transform: scale(1.6);
    }

        .tooltip
    {
      text-decoration:none;
      position:relative;
    }


    .tooltip span
    {
      display:none;
      background:white;
    }

    .tooltip a
    {
      color:blue;
    }

    .tooltip span img
    {
      float:left;
      margin:0px 8px 8px 0;
    }


    .tooltip:hover span
    {
      display:block;
      position:absolute;
      top:0;
      left:0;
      z-index:1000;
      width:auto;
      max-width:320px;
      min-height:128px;
      border:1px solid gray;
      margin-top:12px;
      margin-left:32px;
      overflow:hidden;
      padding:8px;
      -webkit-border-radius: 4px;
      -webkit-box-shadow: 0px 3px 10px #011331;
     }



/* Tablettes (portrait & landscape) */

@media only screen and (min-width : 768px) and (max-width:1023px) {

}


/* Mobile */

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

    body {
    	width:480px;
        text-align:center;
        margin-left: 10px;
    	font-size: 1em;
    	line-height: 1.6;
     	font-family: Helvetica, Arial, sans-serif;
     	background: url('/css/images/ricepaper.png') ;
        height: 100vh;
        animation: changeBg 8s infinite alternate linear;
    }

    .container {
       	height: auto;
      	margin: 0 auto;
    	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        background: linear-gradient(143deg, rgba(240,226,198,1) 39%, rgba(242,208,198,1) 100%);
    	padding: 2em;
    	cursor:default;
    	border: ridge 3px #c98e26;
    	-moz-border-radius: 8px;
    	-webkit-border-radius: 8px;
    }

    #tabStandard {
        background-color: rgba(0, 0, 0, .20);
        border: 2px ridge maroon;
        -moz-border-radius: 9px;
        -webkit-border-radius: 9px;
        padding: 12px;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }

    #tabStandard th {
        border: 1px dotted gray;
        color: rgb(102,51,51);
        font-size: 14;
        background-color: #b2b2b1;
        text-align: left;
        width: 100px;
    }


    #tabStandard select {
        padding: 2px;
        border: #a5d2ca 1px solid;
        border-radius: 4px;
        background-color: whitesmoke;
        width: 200px;
        margin-top:5px;
        color: maroon;
        text-align:center;
    }

    #tabStandard input {
        border: #a5d2ca 1px solid;
        border-radius: 4px;
        background-color: whitesmoke;
        width: 200px;
        color: maroon;
    }

    #tabStandard textarea {
        height:150px;
        width:400px;
        padding: 2px;
        border: #a5d2ca 1px solid;
        border-radius: 4px;
        background-color: whitesmoke;
        margin-top:5px;
        color: maroon;
    }

    .footer {
        position:relative;
        top:0px;
        background-color:rgba(154, 154, 154, 0.60);
        border: 2px ridge lightgray;
        text-align:center;
        margin:auto;
        bottom:0;
        width:480px;
    }

    .footer a {
        color: white;
        text-decoration:none;
    }

}

/* Desktop (portrait & landscape) */

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

}

/* PC */

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

    body {
    	width: auto;
    	font-size: 1em;
    	line-height: 1.6;
     	font-family: Helvetica, Arial, sans-serif;
        background: url('/css/images/ricepaper.png') ;
        background-attachment: fixed;
        height: 100vh;
        animation: changeBg 8s infinite alternate linear;
    }

    #tabStandard {
        background-color: rgba(0, 0, 0, .20);
        border: 2px ridge maroon;
        -moz-border-radius: 9px;
        -webkit-border-radius: 9px;

        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        width:40%;
    }

    #tabStandard th {
        border: 1px dotted gray;
        padding:10px;
        color: rgb(102,51,51);
        font-size: 14;
        background-color: #b2b2b1;
        text-align: left;
        width: 100px;
    }


    #tabStandard select {
        border: #a5d2ca 1px solid;
        border-radius: 4px;
        background-color: whitesmoke;
        height: 28px;
        color: maroon;
        text-align:center;
    }

    #tabStandard input {
        font-size:12px;
        border: #a5d2ca 1px solid;
        border-radius: 4px;
        background-color: whitesmoke;
        width: 250px;
        color: maroon;
    }

    #tabStandard input[type="text"] {
        width:90px;
        font-size:12px;
        border: #a5d2ca 1px solid;
        border-radius: 4px;
        background-color: whitesmoke;
        width: 250px;
        color: maroon;
        text-align:left;
    }
    #tabStandard input[type="date"] {
        width:90px;
        font-size:12px;
        border: #a5d2ca 1px solid;
        border-radius: 4px;
        background-color: whitesmoke;
        width: 250px;
        color: maroon;
        text-align:center;
    }

    #tabStandard textarea {
        height:150px;
        width:500px;
        padding: 10px;
        border: #a5d2ca 1px solid;
        border-radius: 4px;
        background-color: whitesmoke;
        margin-top:5px;
        color: maroon;
    }

    .footer {
        position:relative;
        background-color:rgba(154, 154, 154, 0.60);
        border: 2px ridge lightgray;
        text-align:center;
        margin:auto;
        bottom:0;
        width:1226px;
    }

    .footer a {
        color: white;
        text-decoration:none;
    }

    .input-group {
        position: relative;
        margin: auto;
        text-align: center;
    }

    .input {
         position: relative;
         width: 280px;
         border: dotted 1px #9e9e9e;
         background: none;
         padding: 1rem;
         font-size: 1.0em;
         color: maroon;
         transition: border 150ms cubic-bezier(0.4,0,0.2,1);
    }


/* */