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

.row {
    display: flex;
    flex-wrap: wrap;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-right {
    justify-content: right;
}

.justify-center {
    justify-content: center;
}

.align-center {
    align-items: center;
}

.align-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.responsive {
    width: 100%;
    height: auto;
    display: block;
}

.mauto {
    margin-left: auto;
    margin-right: auto;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.mab-32 {
    margin-bottom: 32px;
}

.mab-8 {
    margin-bottom: 8px;
}

.ma-4 {
    margin: 4px;
}

.ma-8 {
    margin: 8px;
}

.ma-16 {
    margin: 16px;
}

.ma-32 {
    margin: 32px;
}

.pl32 {
    padding-left: 32px;
}

.pr-16 {
    padding-right: 16px;
}

.pr-64 {
    padding-right: 64px;
}

.pb16 {
    padding-bottom: 16px;
}

.p32 {
    padding: 32px;
}

.p16 {
    padding: 16px;
}

.p8 {
    padding: 8px;
}

.p4 {
    padding: 4px;
}


th, td {
  padding: 8px;
}

/**************************************************************                  *************************************/

/**************************************************************          fonts         *************************************/

@font-face {
	font-family: 'javacom';
	src: local("./fonts/javacom.otf") format("opentype");
}

.javacom {
	font-family: 'javacom', sans-serif;
}

@font-face {
	font-family: 'a&c';
	src: local("./fonts/aliensandcows.ttf") format("truetype");
}

.aandc {
	font-family: 'a&c', sans-serif;
}

body {
    font-family: 'Amaranth', sans-serif;
}


/******************        fonts tailles            ****************/

.fs-15 {
    font-size: 15px;
}

.fs-20 {
    font-size: 20px;
}

.fs-25 {
    font-size: 25px;
}

.fs-30 {
    font-size: 30px;
}

.fs-35 {
    font-size: 35px;
}

.fs-40 {
    font-size: 40px;
}
.fs-40 {
    font-size: 40px;
}

.bold {
    font-weight: 700;
}

.light {
    font-weight: 200;
}

/******************        fonts colors           ****************/

.browntxt {
    color: #A55B34;
}

.darkbrowntxt {
    color: #5A3826;
}

.greentxt {
    color: #07601F;
}

.whitetxt {
    color: white;
}

/**************************************************************     background color          *************************************/

.brown {
    background-color: #A55B34;
}

.darkbrown {
    background-color: #5A3826;
}

.green {
    background-color: #66D595;
}

.lightgreen{
    background-color: #B2D8B4;
}

.white {
    background-color: white;
}

.shadow {
    box-shadow: 6px 6px 6px rgb(80, 80, 80);
}

/**************************************************************     header/footer          *************************************/

/**************************************************************        tailles           *************************************/

@media all and (min-width: 2064px) {
    body {
        margin-left: auto;
        margin-right: auto;
        max-width: 2064px;
    }
}

.l12 {
    width: 100%;
}

.l11 {
    width: 91.66%;
}

.l10 {
    width: 83.33%;
}

.l8 {
    width: 66.66%;
}

.l7 {
    width: 58.33%;
}

.l6 {
    width: 50%;
}

.l5 {
    width: 41.66%;
}

.l4 {
    width: 33.33%;
}

.l3 {
    width: 25%;
}

.l2 {
    width: 16.66%;
}

.l1 {
    width: 8.33%;
}

.container {
    width: 100%;
    max-width: 1320px;
    margin-right: auto;
    margin-left: auto;
}

@media all and (max-width: 1480px) {

     main {
        padding-top: 250px;
     }
    
    .m12 {
        width: 100%;
    }

    .m10 {
        width: 83.33%;
    }

    .m8 {
        width: 66.66%;
    }

    .m6 {
        width: 50%;
    }

    .m5 {
        width: 41.66%;
    }

    .m4 {
        width: 33.33%;
    }

    .m3 {
        width: 25%;
    }

    .m2 {
        width: 16.66%;
    }

    .m1 {
        width: 8.33%;
    }

    .container {
        width: 100%;
        max-width: 1140px;
        margin-right: auto;
        margin-left: auto;
    }
}

@media all and (max-width: 1280px) {
    .hbig { 
        display: none;
    }

    #contactb { 
        display: none;
    }

    .hsmall { 
        display: flex;
    }

    #fondvert {
        height: 200px;
    }

    #logo {
        width: 200px;
    }
    #contacts { 
        display: flex;
    }
    
    .navigation {
        position: fixed;
        display: block;
        top: 239px;
        left: -216px;
        width: 205px !important;
        padding-top: 34px;
        padding-left: 64px;
        padding-right: 12px;
        height: 100vh;
        z-index: 9;
        transition: transform 1s ease;
    }

    #burger {
        display: block;
        position: relative;
        width: 32px;
        height: 32px;
    }

    .burger-items {
        position: absolute;
        z-index: 90;
        left: 50%;
        top: 50%;
        width: 80%;
        height: 4px;
        transform: translate(-50%, -50%);
        transition: top 0.5s ease, left 0.5s ease, transform 0.5s ease;
        background-color: black;
    }

    .bi-1 {
        top: 25%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .bi-2 {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .bi-3 {
        top: 75%;
        left: 50%;
        transform: translate(-50%, -50%);

    }

    #burger:hover .bi-1 {
        top: 20%;
    }

    #burger:hover .bi-3 {
        top: 80%;
    }

}

@media all and (max-width: 1000px) {

    .sp12 {
        width: 100%;
    }

    .sp10 {
        width: 83.33%;
    }

    .sp8 {
        width: 66.66%;
    }

    .sp6 {
        width: 50%;
    }

    .sp5 {
        width: 41.66%;
    }

    .sp4 {
        width: 33.33%;
    }

    .sp3 {
        width: 25%;
    }

    .sp2 {
        width: 16.66%;
    }

    .sp1 {
        width: 8.33%;
    }

    .container {
        width: 100%;
        max-width: 960px;
        margin-right: auto;
        margin-left: auto;
    }

    .sphidden{
        display: none;
    }
}

@media all and (max-width: 500px) {
    .s12 {
        width: 100%;
    }

    .s10 {
        width: 83.33%;
    }

    .s8 {
        width: 66.66%;
    }

    .s6 {
        width: 50%;
    }

    .s5 {
        width: 41.66%;
    }

    .s4 {
        width: 33.33%;
    }

    .s3 {
        width: 25%;
    }

    .s2 {
        width: 16.66%;
    }

    .s1 {
        width: 8.33%;
    }

    .container {
        width: 100%;
        max-width: 500px;
        margin-right: auto;
        margin-left: auto;
    }
}