@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
body {
    margin-bottom: 0;
}

#global{
   
        font-family: "Lato", sans-serif;
        font-weight: 500;
        font-style: normal;
   
}
/* taille conten*/
.layout-width {
    width: 1120px;
}


/* interligne */
.line-height-0 {
    line-height: 0;
}



/* police d'ecriture */
.great-vibes-regular {
    font-family: 'Great Vibes', cursive;
    font-weight: 400;
    font-style: normal;
}
.oswald {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-style: normal;
}
.font-bold {
    font-weight: 600;
}






/* couleur */ 
.text-white {
    color: #fff;
}
.text-black {
    color: #000;
}

.bg-gradien-blue{
    background: linear-gradient(to right, #e0f7ff, #b3ecff);
}
.bg-gradien-red{
    background: linear-gradient(to right, #ffe0e0, #ffb3b3);
}
.bg-gradien-yellow{
    background: linear-gradient(to right, #ffffe0, #fffab3);
}
.bg-gradien-green{
    background: linear-gradient(to right, #e0ffe0, #b3ffb3);
}





.bg-home{
    background: linear-gradient(to right, #ffffe0, #ffe0e0, #e0ffe0, #e0f7ff);
}


.bg-home-linear-yellow{
background-color: #ffffe0;
}
.bg-home-linear-red{
    background-color: #ffe0e0;
}
.bg-home-linear-green{
    background-color: #e0ffe0;
}
.bg-home-linear-blue{
    background-color: #e0f7ff;
}


.bg-blue{
    background-color: #7eace0;
}
.bg-red{
    background-color: #e45f5f;
}
.bg-yellow{
    background-color: #dbdb00;
}
.bg-green{
    background-color: #71b471;
}
.bg-blue-1{
    background-color: #e0f7ff;
}
.bg-blue-2{
    background-color: #b3ecff;
}

.bg-red-1{
    background-color: #ffe0e0;
}
.bg-red-2{
    background-color: #ffb3b3;
}

.bg-yellow-1{
    background-color: #ffffe0;
}
.bg-yellow-2{
    background-color: #fffab3;
}

.bg-green-1{
    background-color: #e0ffe0;
}
.bg-green-2{
    background-color: #b3ffb3;
}






.blue-hover:hover {
    color: #4e4eac !important;
}
.yellow-hover:hover {
    color: #dbdb00 !important;
}
.red-hover:hover {
    color: #e45f5f !important;
}
.green-hover:hover {
    color: #71b471 !important;
}
.black-color {
    color: #000;
}
.white-color {
    color: #fff;
}

/* decoration lien */
.text-decoration-none {
    text-decoration: none;
}



/* taille ou alignement texte */

.text-center {
    text-align: center;
}
.text-20 {
    font-size: 60px;
}

.text-xl{
    font-size: 35px;
}
/* taille hr */
.size-hr {
    width: 80%;
}


/* tableau */

.hover-white:hover {
    color: #fff !important;
    font-weight: 600;
}
.hover-black:hover {
    color: #000 !important;
    font-weight: 600;
}

table{
    border-collapse: collapse;
}


/*header */
nav {
    float: right;
    position: relative;
    top: -81px;
    right: 25px;
}
nav ul {
    list-style: none;
}

nav ul li {
    display: inline;
    padding-left: 30px;
    font-size: 22px;
    position: relative;
}

.logo-up {
    position: relative;
    z-index: 25;
    font-size: 75px;
}
.logo-up a {
    color: #e45f5f;
}

.logo-down a {
    color: #000;
}
.logo-down {
    font-size: 65px;
    text-transform: uppercase;
}

/*main */

.home-fruit-height {
    height: 300px;
}
/* animation home */
.container-1,
.container-2,
.container-3,
.container-4 {
    position: relative;
}
.container-1:hover .overlay {
    height: 100%;
}
.container-2:hover .overlay {
    height: 100%;
}

.container-3:hover .overlay {
    height: 100%;
}

.container-4:hover .overlay {
    height: 100%;
}
.overlay {
    color: #fff;
    text-decoration: none;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    transition: height 200ms ease-in;
}




/*footer */


footer {
    height: 40px;
    color: #fff;
}
footer p a {
    color: #fff;
}



/* taille colonne + gouttiere colonne */
.col {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}

.last {
    margin: 0 !important;
}

.col-6-12 {
    width: calc(1100px / 2) !important;
}
.col-4-12 {
    width: calc(1120px / 3 - 13.3333px) !important;
}
.col-3-12 {
    width: calc(1120px / 4 - 15px) !important;
}

.col-8-12 {
    width: calc(1120px / 12 * 8 - 6.666667px) !important;
}
.col-9-12 {
    width: calc(1120px / 12 * 9 - 5px) !important;
}

/* margin et padding */

.center-layout {
    margin-left: auto;
    margin-right: auto;
}

.py-4 {
    padding-top: 8px;
    padding-bottom: 8px;
}
.px-4 {
    padding-left: 8px;
    padding-right: 8px;
}
.p-8{
    padding: 16px;
}
.pb-4 {
    padding-bottom: 16px;
}
.ml-5 {
    margin-left: 20px;
}
.my-8 {
    margin-top: 32px;
    margin-bottom: 32px;
}

/* float*/
.clear {
    clear: both;
}

/* border */
.border{
    border: 1px solid #000;
}