:root {
    --mg-color: rgba(60,0,66,255);
  --texte-meduim:1.6rem;
    --titre:7.3rem;
    --titre2:5.8rem;
    --sous-titre:1.4rem;
    --texte:1.1em;
    --height-box:430px;
    --margin:20px;
}
a{
    color: var(--mg-color);
    text-decoration: none;
    background-color: transparent;
}

a:hover{
 	color:red;
    text-decoration: none;

}
@font-face {
    font-family:regular;
    src: url("/public/fonts/Tartuffo-Regular.otf")     
}

@font-face { 
  font-family: meduim;
  src:url("/public/fonts/Tartuffo-Medium.otf")
}

@font-face { 
  font-family: italic;
  src:url("/public/fonts/Tartuffo-RegularItalic.otf")
}

@font-face { 
  font-family: thin;
  src:url("/public/fonts/Tartuffo-Thin.otf")
}

@font-face { 
  font-family: thinitalic;
  src:url("/public/fonts/Tartuffo-ThinItalic.otf")
}


@media screen and (max-width: 1380px)  and (min-width: 1000px)
{
    :root {
        --titre:5.4rem;
        --titre2:4.3rem;
        --sous-titre:1.4rem;
        --texte:0.76rem;
        --texte-meduim:1.5rem;
        --height-box:180px;
        --margin: 20px;
        --margin-lateral:1.1em;
    }

    body{
        line-height: 15px;
    }
  .remove.icon:before {
        width: 30px !important;
       height: 3px !important;
    }
    
    .remove.icon:after {
        width: 30px !important;
        height: 3px !important;
    }
  
    .remove.icon {
  	right: 30px !important;
    margin-top: 15px !important;
  }
}
#test2{
    display:none;
}
.size-text{
    font-size:var(--texte) !important;
}
.thin{
  font-family:thin;
}
#test{
    margin-bottom:30px;
  margin-top: 27px;
}
#titre{
    font-size:var(--titre);
    line-height: 90%;
}

#titre2{
    font-size:var(--titre2);
    line-height: 90%;
}
.titre{
    position:relative;
    text-align: center;
    margin-right:auto;
    margin-left:auto;
    padding-bottom: 20px;
}

body{
    color:var(--mg-color);
    position:relative;
    font-family: regular;
}
html{height:100%;}
.sous-titre{
    font-size:var(--sous-titre);
}

.remove.icon {
    color: var(--mg-color);
    position:absolute;
    right: 40px;
    margin-top: 20px;
}

.remove.icon:before {
    content: '';
    position: absolute;
    width: 40px;
    height: 4px;
    background-color: currentColor;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#row{
    grid-template-columns:repeat(3, 1fr);
    display:grid;
}

#col1{
    grid-column:1;
}

#col2{
    grid-column:2;
}

#col3{
    grid-column:3;
}

.remove.icon:after {
    content: '';
    position: absolute;
    width: 40px;
    height: 4px;
    background-color: currentColor;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.row{
    margin-right: 0px; 
    margin-left: 0px;
    width: 100%;
}


@media screen and (max-width: 600px) 
{
   :root {
        --titre:5.4rem;
        --titre2:4.3rem;
        --sous-titre:1.4rem;
        --texte:0.76rem;
        --texte-meduim:1.5rem;
        --height-box:180px;
        --margin: 20px;
        --margin-lateral:1.1em;
    }

    body{
        height:auto !important;
        overflow-y: visible !important;
        font-family: O;
    }
    footer{
        position:initial !important;
    }
    .remove.icon:before {
        width: 25px;
        height: 2px;
    }
    
    .remove.icon:after {
        width: 25px;
        height: 2px;
    }

    #test3 span{
        line-height: 80%;
    }
    #test4 span{
        line-height: 80%;
    }
    #test5 span{
        line-height: 80%;
    }
    #test3{
      margin-bottom: 10px;
        display: flex;
        margin-top:30px;
        -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
    }
    #test4{
      margin-bottom: 10px;
        display: flex;
        -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
    }
    #test5{
        display:flex;
        margin-bottom:40px;
        -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
    }
    #trait{
        display:none;
    }
    #mobile{
        display:block;
    }
    #test{
        display:none;
    }
    #test2{
        display:block;
        font-size:var(--titre);
        height:auto !important;
    }
  
    .titre{
        width: 95% !important;
    }

    #col1{
        grid-column:1/4;
        grid-row:1;
    }
    
    #col2{
        grid-column:1/4;
        grid-row:2;
    }
    
    #col3{
        grid-column:1/4;
        grid-row:3;
    }
    
}