﻿.Button-Font {
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

.IconSF {
    font-size: 5em;
    color: #263B7D;
    border: solid 2px;
    padding: 8px 8px 8px 8px;
    background: #FFFFFFCC;
    border-color: #263B7D;
    border-radius: 50%;
    width: 250px;
    height: 250px;
    display: block;
    aspect-ratio: 1 / 1;
    margin:10px;
}
    .IconSF a {
        font-size:0.4em;
    }
        .IconSF a:hover {
        color: #19A4C9;
        border-color: #19A4C9;
    }
    .IconSF:hover {
        color: #19A4C9;
        border-color: #19A4C9;
    }

.IconSF_2 {
    font-size: 5em;
    color: #19A4C9;
    border: solid 1px;
    border-radius: 50%;
    border-color: #19A4C9;
}

    .IconSF_2:hover {
        color: #263B7D;
        border-color: #263B7D;
    }

.text-center {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    padding: 5%;
    justify-content: center;
}
@media screen and (max-width: 1380px) {
    .IconSF {
        height: 210px;
        width: 210px;
        font-size: 3em;
    }
}
@media screen and (max-width: 1150px) {
    .IconSF {
        height: 175px;
        width: 175px;
        font-size: 1.6em;
        font-weight:bold;
    }
}

@media screen and (max-width: 1000px) {

    .text-center {
        flex-direction: column;
        align-items: center;
    }
    .IconSF {
        height: 210px;
        width: 210px;
        font-size: 3em;
        font-weight: lighter;
    }
}

.d-block {
    display: block;
    width: 15%;
    margin: 1% 4% 1% 4%;
    padding: 1%;
    background-color: white;
    align-self: center;
    background-color: rgba(200, 200, 200, 0.75);
    border-radius: 15%;
}

.NopadRight {
    padding-right: 0;
}

.MinusSfTexte {
    background-color: rgba(127, 127, 127, 0.75);
    border-radius: 10%;
}

    .MinusSfTexte p {
        color: black;
    }

        .MinusSfTexte p span {
            color: white !important;
        }


.MinusSfBg {
    background-image: url(../Image/Pipes.png);
    background-repeat: no-repeat;
    background-size: cover;
}

@-webkit-keyframes SlideLeftToRight {
    from {
        position: relative;
        right: 0%;
    }

    to {
        position: relative;
        right: 120%;
    }
}

@-moz-keyframes SlideLeftToRight {
    from {
        position: relative;
        right: 0%;
    }

    to {
        position: relative;
        right: 120%;
    }
}
@keyframes SlideLeftToRight {
    from {
        position: relative;
        right: 0%;
    }

    to {
        position: relative;
        right: 120%;
    }
}


@-webkit-keyframes SlideRightToLeft {
    from {
        position :relative;
        left : 0%;
    }

    to {
        position: relative;
        left: 120%;
    }
}

@-moz-keyframes SlideRightToLeft {
    from {
        position: relative;
        left: 0%;
    }

    to {
        position: relative;
        left: 120%;
    }
}
@keyframes SlideRightToLeft {
    from {
        position: relative;
        left: 0%;
    }

    to {
        position: relative;
        left: 120%;
    }
}

@keyframes BubblePop {
    from {
        scale: 0%;
    }

    to {
        scale: 120%;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .MinusSfSlideRightToLeft {
        animation-duration: 2.5s;
        animation-name: SlideRightToLeft;
        animation-direction: reverse;
        animation-iteration-count: 1;

        -webkit-animation-duration: 2.5s;
        -webkit-animation-name: SlideRightToLeft;
        -webkit-animation-direction: reverse;
        -webkit-animation-iteration-count: 1;
    }

    .MinusSfSlideLeftToRight {
        animation-duration: 2.5s;
        animation-name: SlideLeftToRight;
        animation-direction: reverse;
        animation-iteration-count: 1;

        -webkit-animation-duration: 2.5s;
        -webkit-animation-name: SlideLeftToRight;
        -webkit-animation-direction: reverse;
        -webkit-animation-iteration-count: 1;
    }

    .BubblePop {
        animation-duration: 2s;
        animation-name: BubblePop;
        animation-direction: initial;
        animation-iteration-count: 1;
    }
}

.MinusSf {
    position: relative;
    border: solid 3px;
    border-radius: 10%;
    border-color: #51ae46cf;
    padding: 2%;
    margin: 1%;
}

.MinusSf_size_center {
    font-size: 3em;
}

.MinusSF_Title {
    justify-content: center;
    align-items: center;
    display: flex;
}



/*Media Responsive */
@media screen and (max-width: 1200px) {
    .d-block {
        width: 20%;
        margin: 2% 4% 2% 4%;
    }
}

@media screen and (max-width: 950px) {
    .d-block {
        margin: 3% 4% 3% 4%;
    }
}

@media screen and (max-width: 850px) {
    .d-block {
        width: 25%;
    }
}

@media screen and (max-width: 748px) {
    .d-block {
        width: 30%;
        margin: 4% 4% 4% 4%;
    }
}

.SavoirFaireButton {
}

.OtherBlock {
    font-size : 1.3em;
}