/* body {
    background-color: #404040;
    color: white;
}

*/

@font-face {
    font-family: 'icomoon';
    src: url('font-face/icomoon.eot?th7mpk');
    src: url('font-face/icomoon.eot?th7mpk#iefix') format('embedded-opentype'),
        url('font-face/icomoon.ttf?th7mpk') format('truetype'),
        url('font-face/icomoon.woff?th7mpk') format('woff'),
        url('font-face/icomoon.svg?th7mpk#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}



/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700,900|Open+Sans:300,400,600,700&display=swap&subset=cyrillic,cyrillic-ext);
@import url(https://fonts.googleapis.com/css?family=Varela&display=swap);



[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-dog:before {
    content: "\e900";
}

.icon-cat:before {
    content: "\e901";
}

.icon-paw1:before {
    content: "\e902";
}

.icon-child:before {
    content: "\e903";
}

.icon-paw:before {
    content: "\e904";
}

.icon-birthday-cake:before {
    content: "\e905";
}



.ladding-h {
    font-Family: "sohne-var", "Helvetica Neue", "Arial", sans-serif;
    font-size: 38px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: -0.2px;
    line-height: 48px;
    text-transform: none;
    color: #FFFFFF;
}

/* general */
*,
:after,
:before {
    font: inherit;
    line-height: inherit;
    color: inherit;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}


:focus {
    outline: 0
}

body,
div,
h1,
h2,
html,
p {
    display: block;
    color: rgb(255, 255, 255);
    /* font-Family: "sohne-var", "Helvetica Neue", "Arial", sans-serif; */
    font-family: Montserrat, 'Open Sans', sans-serif;

}

a,
button,
input,
span,
textarea {
    display: inline-block
}

body,
html {
    height: 100%;
    /*   background-color: #f89f4f; */
    background-color: #3E1E68;
}

li {
    list-style: none;
}

strong {
    font-weight: 800;
}



a {
    text-decoration: none !important;
}


.panel-age-info .title-animal,
#aja,
#cat,
#horse,
#rabbit {
    color: rgb(0, 0, 0);
    font-size: 1.3em;
    margin-top: 10px;
}

.panel-age-info .title-dog {
    color: rgb(0, 0, 0);
    font-size: 1.3em;
    margin-top: 10px;
    font-weight: 600;
}



.your-age .age-teasing,
#age-fix,
.youare {
    color: black;
}


.icon-small {
    margin-right: 10px;
}

/* Navbar */


.tool-home {
    margin-top: 55px;
    margin-bottom: 150px;



}

.deco-title-home {
    text-align: center;
    margin-bottom: 15px;

}

.deco-title-home h1 {
    font-size: 4.9em;
    margin-bottom: 15px;
    color: white;
    text-decoration: underline;
}

.deco-title-home h2 {
    font-size: 1.6em;
    color: white;
    margin-bottom: 75px;
}



.tuto-home {
    max-width: 1320px;
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}

.tuto-home h2 {
    font-size: 1.5em;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;

}

.tuto-container-img {
    margin: auto;
    text-align: center;
}

.tuto-home img {
    width: 200px;
    height: 200px;
    text-align: center;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 50px;
}


/* tools */

#main_container {
    width: 100%;

}

.container-age-datet {
    display: flex;

}

#birth_date_input,
#age_container {
    text-align: center;
    margin: 20px;
    margin-left: auto;
    margin-right: auto;
}

#age_container {
    width: 300px;
    background: #fff;
    color: #a3a3a3;
    font: inherit;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
    border: 0;
    outline: 0;
    padding: 22px 18px;
    background-color: green;
    display: none;
}

#age {
    padding: 5px;
}

#birth_date {
    width: 200px;
    /*  background: #320039; */
    background: #312333;

    color: #a3a3a3;
    font: inherit;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
    border: 0;
    outline: 0;
    padding: 22px 18px;
}

.btn {
    text-align: center;
    background: transparent;
    color: inherit;
    font: inherit;
    width: 200px;
    margin: auto;
    border: 0;
    outline: 0;
    padding: 0;
    transition: all 200ms ease-in;
    cursor: pointer;
}

.btn--primary {
    background: #ffffff;
    color: #903cf5;
    font-weight: 650;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    padding: 20px 22px;
    margin-bottom: 40px;
}

.btn--primary:hover {
    background: #6c7ff2;
}

.btn--primary:active {
    background: #7f8ff4;
    box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.2);
}

#exact_age {
    color: #FFF;
}



.button {
    /*  color: #5a00ee; */
    border: none;
    padding: 20px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    color: #903cf5;
    background-color: white;
    font-weight: 750;
}

.button:hover {
    background-color: #903cf5;
    color: white;
    /* Green */
}

.tool-home .active {
    background-color: #903cf5;
    color: white;
    /* Green */

}



.tab-link {
    text-align: center;
    margin-bottom: 25px;
}

.tab-link a {
    margin-left: 10px;
}


.intro-age {
    max-width: 1120px;
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}


article {
    max-width: 1120px;
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}

.summary {
    text-align: center;
    margin: 50px;
}




.age-teasing {
    font-size: 7em;
}


#age-fix {
    font-size: 3em;
}

.enter-age {
    margin-top: 20px;
}

#y-special {
    font-weight: 600;
    font-size: 1.5em;
}

/* faq */


/* faq */

/*

.dl-faq {
    position: relative;
    max-width: 36rem;
    margin: 2rem auto 3rem;
}

.dl-faq>dt {
    font-size: 1.2rem;
    font-weight: 100;
    padding: 1rem;

 
    border-top: 1px solid rgba(255, 255, 255, .2);
}

dt>button {
    color: inherit;
    background-color: inherit;
}

.dl-faq>dt:first-child .pab-btn,
.dl-faq>dt:first-child {
    border-top: 0;
}

.dl-faq.pab_container>dt {

    padding: 0;
}

.dl-faq>dd {
    margin: 0 auto;
    padding: 0 1.5em;
    font-weight: 100;
}

.dl-faq>dd>div {
    padding: 0 0 2rem;
}

.dl-faq div>p {
    margin: 0 0 1rem;
}

.dl-faq div>:last-child {
    margin: 0;
}

*/




.accordion__content h2 {
    text-align: center;
    color: white;

}

.accordion__content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
    box-shadow: var(--shadow);
    border-radius: 8px;
}

.accordion__item {
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);

    background: #813bbb;
    margin-bottom: 0.5em;
}

.item__header {
    display: flex;
    justify-content: space-between;
    column-gap: 0.2em;
    align-items: center;
    padding: 15px;
}

.item__icon {

    flex: 0 0 25px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    height: 25px;
    width: 25px;
    border-radius: 4px;
    background: var(--icon-bg);
    cursor: pointer;
    box-shadow: var(--shadow);
}

.item__icon i {
    transition: all 0.25s cubic-bezier(0.5, 0, 0.1, 1);
    color: rgb(245, 245, 245);
}

.item__question {
    font-size: 1em;
    line-height: 1;
    font-weight: 500;
}

.accordion__content .active .item__icon i {
    transform: rotate(180deg);
}

.accordion__content .active .item__question {
    font-weight: 500;
}

.item__content {
    max-height: 0;
    overflow: hidden;
    transition: all 300ms ease;


}

.item__answer {
    line-height: 150%;
    opacity: 0.8;
    margin-top: 25px;
    margin-bottom: 20px;
}


.faq-display {
    display: flex;
    flex-direction: row;
}

.faq-bloc-1 {
    padding-right: 1rem;
}

.faq-bloc-2 {
    padding-left: 1rem;
}

.item__question {
    font-size: 1.1em;
    color: rgb(245, 245, 245);
    line-height: 1.80rem;
}




/* The acivating buttons added via JS */

.pab-btn {
    position: relative;
    cursor: pointer;
    transition: color .3s ease-in;

    /* Using absolute positioning for SVG so reserve some space */
    padding: 1rem 2.5rem 1rem .5rem;
    border: 0 solid transparent;
    border-top: 1px solid #e7e9f2;

    /* inherit doesn't work in IE */
    font-size: inherit;
    text-align: left;
    width: 100%;
}

/* .pab-btn:hover,
  .pab-btn:focus,
  .pab-btn:active {
    color:#fff;
    background-color: rgba(0,0,0,.25); 
  }
  
  */
.pab-btn:focus {
    outline: 0 solid;
}

.pab-btn::-moz-focus-inner {
    border: 0;
    padding: 0;
    margin-top: -2px;
    margin-bottom: -2px;
}


/* Underline text on button hover (Tesco requirement) */

.pab-btn>h5 {
    position: relative;
    /* Removes button drepression in IE */
    pointer-events: none;
    /* Required by Safari */
    border-bottom: 1px solid transparent;
    transition: border-color .3s;
}

.pab-btn:hover>h5,
.pab-btn:focus>h5 {
    border-bottom-color: rgba(255, 255, 255, .5);
}

.pab-btn:active>h5 {
    border-bottom-color: transparent;
}


/* SVG plus */

.pab-svg-plus {
    /* Tesco requirement
    border: 2px solid currentColor; */
    border-radius: 100%;
    display: block;
    position: absolute;
    top: calc(50% - .75em);
    right: 4px;
    width: 1.5em;
    height: 1.5em;
    margin: 0;
    pointer-events: none;
    stroke-width: 4;
    stroke-linecap: square;
    stroke: currentColor;
    -webkit-transition: transform .7s ease-out, box-shadow .3s ease-out;
    transition: transform .7s ease-out, box-shadow .3s ease-out;
    color: #c050ff;
}

.pab-btn:hover .pab-svg-plus,
.pab-btn:focus .pab-svg-plus {
    /* Same colour as text but with .4 alpha */
    /* Tesco requirement
    box-shadow: 0 0 0 4px rgba(0, 83, 159, 0.4);*/
}

.pab-btn:active .pab-svg-plus {
    /* Tesco requirement
    box-shadow: 0 0 0 4px rgba(0, 83, 159, 0);*/
}

[aria-expanded="true"]>.pab-svg-plus {
    transform: rotateZ(360deg);
}

.use-plus {
    /* used to animate plus into minus */
    -webkit-transition: stroke .5s ease-out, opacity .7s ease-out;
    transition: stroke .5s ease-out, opacity .7s ease-out;
}

[aria-expanded=true] .use-plus {
    opacity: 0;
}

.isSafari .pab-btn .pab-svg-plus {
    box-shadow: none;
}


/* Open / close animation - The inaccurate CSS max-height is resolved via JS adding an inline style */

[data-pab]+[aria-hidden] {
    overflow: hidden;
    opacity: 1;
    max-height: 50rem;
    visibility: visible;
    transition: visibility 0s ease 0s, max-height .65s ease-out 0s, opacity .65s ease-in 0s;
}

[data-pab]+[aria-hidden="true"] {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition-delay: .66s, 0s, 0s;
}


/* Overide the max-height set as an inline style by the JS */

[data-pab]+[style][aria-hidden="true"] {
    max-height: 0 !important;
}

#faq {
    margin-top: 150px;
}

#faq h5 {
    color: #ffffff;
}

#faq p {
    color: #d4d4db;
}

#faq h3 {
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
}




.footer-tm {

    text-align: center;
}


.footer-contact {
    background: #5a407b;
    padding: 20px;
}

.footer-links {

    padding: 20px;
    background: #3d2b55;
}

/* pet age */
.container-pet {

    width: 1200px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.ro {
    align-items: center;
    justify-content: center;
    align-content: center !important;
    text-align: center;
    color: white;
    font-weight: 400;
    font-size: 15px;
}

.pi {
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;




}

#HAge {
    align-items: center;
    text-align: center;
    color: black;
    background-color: white;
    margin-bottom: 20px;

    background: #fff;
    color: #a3a3a3;
    font: inherit;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
    border: 0;
    outline: 0;
    padding: 22px 18px;
}

.crab {
    background: #0000005e;
    text-align: center;

    padding-top: 50px;
    padding-bottom: 50px;
}

#button {
    border-radius: 15px;
}

.bloc-animal {
    width: 36%;
    margin: auto;
}

.bloc-dog {

    margin: auto;
}

.card-panel {
    background-color: #FFF;
    padding: 34px;
    margin: 0.5rem 0 1rem 0;
}

.paire {
    display: flex;
}

.bloc-panel-desc {
    display: flex;
}

.bloc-panel-desc img {
    display: flex;
    width: 100px;
    height: 100px;
}


.panel-age-info {

    width: 300px;
    text-align: center;
}

.panel-age-info .title-animal {
    font-size: 1.3em;
    font-weight: 600;
    margin-top: 10px;
}



table {
    margin-top: 100px;
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

th,
td {
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

th {
    text-align: left;
}

thead th {
    background-color: #55608f;
}

tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

tbody td {
    position: relative;
}

tbody td:hover:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -9999px;
    bottom: -9999px;
    background-color: rgba(255, 255, 255, 0.2);
    z-index: -1;
}

tbody p {
    font-weight: 600;
}


.calcul-config {
    text-align: center;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 70px;
    background-color: #f26464;
    margin: auto;
    background-color: #fff;
    width: 1200px;
}



.intro-p1 {
    display: flex;
    width: 1020px;
    margin: 0 auto;
    margin-top: 0px;
    padding: 0 20px;
    margin-top: 80px;
}





.intro-p1 h2 {
    color: #F2F2F2;
    font-size: 30px;
}

.intro-p1 p {
    max-width: 1120px;
    margin-right: auto;
    margin-left: auto;
    line-height: 30px;
}

.intro-p1 img {
    width: 200px;
    height: 200px;
}

/* animation bk */

@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    position: relative;
    top: 0;
    left: 0;
    background: #3E1E68;
    z-index: -2;
}

.background .animate span {
    width: 1vmin;
    height: 1vmin;
    border-radius: 1vmin;
    backface-visibility: hidden;
    /* position: absolute; */
    animation: move;
    animation-duration: 2;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index: -1;



    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;

}

.age-ans,
.reste {
    background-color: black;
    border-radius: 5px;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: 3px 5px 15px rgba(0, 0, 0, 0.25);
}

.background .animate span:nth-child(0) {
    color: #583C87;
    top: 5%;
    left: 25%;
    animation-duration: 475s;
    animation-delay: -64s;
    transform-origin: 13vw -6vh;
    box-shadow: 2vmin 0 0.3139780049766213vmin currentColor;

}

.background .animate span:nth-child(1) {
    color: #583C87;
    top: 18%;
    left: 58%;
    animation-duration: 265s;
    animation-delay: -201s;
    transform-origin: -23vw 24vh;
    box-shadow: -2vmin 0 0.8142013373344925vmin currentColor;
}

.background .animate span:nth-child(2) {
    color: #583C87;
    top: 24%;
    left: 92%;
    animation-duration: 360s;
    animation-delay: -204s;
    transform-origin: 20vw -15vh;
    box-shadow: -2vmin 0 1.2353911005305696vmin currentColor;
}

.background .animate span:nth-child(3) {
    color: #FFACAC;
    top: 23%;
    left: 52%;
    animation-duration: 205s;
    animation-delay: -372s;
    transform-origin: -13vw -22vh;
    box-shadow: -2vmin 0 0.37513732934411714vmin currentColor;
}

.background .animate span:nth-child(4) {
    color: #583C87;
    top: 29%;
    left: 86%;
    animation-duration: 258s;
    animation-delay: -386s;
    transform-origin: 7vw -19vh;
    box-shadow: 2vmin 0 0.9471371806664483vmin currentColor;
}

.background .animate span:nth-child(5) {
    color: #E45A84;
    top: 85%;
    left: 39%;
    animation-duration: 427s;
    animation-delay: -204s;
    transform-origin: -21vw -15vh;
    box-shadow: -2vmin 0 1.0231671272537324vmin currentColor;
}

.background .animate span:nth-child(6) {
    color: #583C87;
    top: 96%;
    left: 89%;
    animation-duration: 151s;
    animation-delay: -324s;
    transform-origin: -18vw -1vh;
    box-shadow: -2vmin 0 0.5776725161817797vmin currentColor;
}

.background .animate span:nth-child(7) {
    color: #583C87;
    top: 26%;
    left: 68%;
    animation-duration: 360s;
    animation-delay: -334s;
    transform-origin: -7vw -18vh;
    box-shadow: -2vmin 0 0.9182995886015191vmin currentColor;
}

.background .animate span:nth-child(8) {
    color: #583C87;
    top: 21%;
    left: 15%;
    animation-duration: 383s;
    animation-delay: -295s;
    transform-origin: -17vw 21vh;
    box-shadow: 2vmin 0 0.49254597942327716vmin currentColor;
}

.background .animate span:nth-child(9) {
    color: #583C87;
    top: 51%;
    left: 79%;
    animation-duration: 44s;
    animation-delay: -227s;
    transform-origin: 23vw -10vh;
    box-shadow: 2vmin 0 0.6025596594347605vmin currentColor;
}

.background .animate span:nth-child(10) {
    color: #FFACAC;
    top: 69%;
    left: 7%;
    animation-duration: 86s;
    animation-delay: -12s;
    transform-origin: 12vw -13vh;
    box-shadow: -2vmin 0 0.6683249135537737vmin currentColor;
}

.background .animate span:nth-child(11) {
    color: #E45A84;
    top: 32%;
    left: 43%;
    animation-duration: 265s;
    animation-delay: -49s;
    transform-origin: 10vw 21vh;
    box-shadow: 2vmin 0 0.5375454419546697vmin currentColor;
}

.background .animate span:nth-child(12) {
    color: #583C87;
    top: 54%;
    left: 33%;
    animation-duration: 297s;
    animation-delay: -272s;
    transform-origin: -19vw -5vh;
    box-shadow: -2vmin 0 0.7067223712047409vmin currentColor;
}

.background .animate span:nth-child(13) {
    color: #583C87;
    top: 68%;
    left: 5%;
    animation-duration: 349s;
    animation-delay: -122s;
    transform-origin: -1vw 0vh;
    box-shadow: -2vmin 0 0.31466576173529304vmin currentColor;
}

.background .animate span:nth-child(14) {
    color: #583C87;
    top: 80%;
    left: 9%;
    animation-duration: 60s;
    animation-delay: -269s;
    transform-origin: 23vw 0vh;
    box-shadow: -2vmin 0 1.1043731409911302vmin currentColor;
}

.background .animate span:nth-child(15) {
    color: #FFACAC;
    top: 38%;
    left: 72%;
    animation-duration: 142s;
    animation-delay: -298s;
    transform-origin: -16vw 22vh;
    box-shadow: -2vmin 0 0.6044182093417749vmin currentColor;
}

.background .animate span:nth-child(16) {
    color: #E45A84;
    top: 94%;
    left: 61%;
    animation-duration: 388s;
    animation-delay: -304s;
    transform-origin: 13vw -8vh;
    box-shadow: -2vmin 0 0.4976682954845526vmin currentColor;
}

.background .animate span:nth-child(17) {
    color: #E45A84;
    top: 87%;
    left: 33%;
    animation-duration: 167s;
    animation-delay: -145s;
    transform-origin: 20vw 18vh;
    box-shadow: -2vmin 0 0.4019843598565026vmin currentColor;
}

.background .animate span:nth-child(18) {
    color: #583C87;
    top: 5%;
    left: 75%;
    animation-duration: 404s;
    animation-delay: -350s;
    transform-origin: -9vw -6vh;
    box-shadow: 2vmin 0 0.49732368477462974vmin currentColor;
}

.background .animate span:nth-child(19) {
    color: #E45A84;
    top: 41%;
    left: 85%;
    animation-duration: 463s;
    animation-delay: -283s;
    transform-origin: 24vw -19vh;
    box-shadow: 2vmin 0 0.8751658099551404vmin currentColor;
}

.background .animate span:nth-child(20) {
    color: #FFACAC;
    top: 71%;
    left: 75%;
    animation-duration: 81s;
    animation-delay: -306s;
    transform-origin: -6vw -17vh;
    box-shadow: -2vmin 0 0.6378281783320723vmin currentColor;
}

.background .animate span:nth-child(21) {
    color: #583C87;
    top: 63%;
    left: 50%;
    animation-duration: 159s;
    animation-delay: -472s;
    transform-origin: 8vw -21vh;
    box-shadow: -2vmin 0 0.5925817054419517vmin currentColor;
}

.background .animate span:nth-child(22) {
    color: #FFACAC;
    top: 27%;
    left: 84%;
    animation-duration: 323s;
    animation-delay: -107s;
    transform-origin: -16vw 12vh;
    box-shadow: 2vmin 0 0.4719817148438168vmin currentColor;
}

.background .animate span:nth-child(23) {
    color: #FFACAC;
    top: 97%;
    left: 29%;
    animation-duration: 110s;
    animation-delay: -439s;
    transform-origin: 1vw 2vh;
    box-shadow: 2vmin 0 0.4197099907798102vmin currentColor;
}

.background .animate span:nth-child(24) {
    color: #583C87;
    top: 26%;
    left: 7%;
    animation-duration: 471s;
    animation-delay: -445s;
    transform-origin: 6vw 20vh;
    box-shadow: -2vmin 0 0.995128340286577vmin currentColor;
}

.background .animate span:nth-child(25) {
    color: #E45A84;
    top: 91%;
    left: 36%;
    animation-duration: 287s;
    animation-delay: -276s;
    transform-origin: 13vw 11vh;
    box-shadow: -2vmin 0 1.042007185485394vmin currentColor;
}

.background .animate span:nth-child(26) {
    color: #FFACAC;
    top: 38%;
    left: 4%;
    animation-duration: 153s;
    animation-delay: -20s;
    transform-origin: -1vw 9vh;
    box-shadow: 2vmin 0 0.5765616136007089vmin currentColor;
}

.background .animate span:nth-child(27) {
    color: #FFACAC;
    top: 2%;
    left: 36%;
    animation-duration: 134s;
    animation-delay: -181s;
    transform-origin: -21vw 6vh;
    box-shadow: -2vmin 0 0.970518245740105vmin currentColor;
}

.background .animate span:nth-child(28) {
    color: #583C87;
    top: 15%;
    left: 47%;
    animation-duration: 349s;
    animation-delay: -471s;
    transform-origin: 8vw 20vh;
    box-shadow: 2vmin 0 0.4784874316415003vmin currentColor;
}

.background .animate span:nth-child(29) {
    color: #583C87;
    top: 93%;
    left: 62%;
    animation-duration: 21s;
    animation-delay: -157s;
    transform-origin: 20vw -6vh;
    box-shadow: -2vmin 0 1.0431703130433811vmin currentColor;
}

.background .animate span:nth-child(30) {
    color: #FFACAC;
    top: 9%;
    left: 61%;
    animation-duration: 385s;
    animation-delay: -111s;
    transform-origin: 5vw -9vh;
    box-shadow: 2vmin 0 0.7112523237712456vmin currentColor;
}

.background .animate span:nth-child(31) {
    color: #FFACAC;
    top: 61%;
    left: 93%;
    animation-duration: 27s;
    animation-delay: -285s;
    transform-origin: 5vw -10vh;
    box-shadow: 2vmin 0 0.5130886627860786vmin currentColor;
}

.background .animate span:nth-child(32) {
    color: #E45A84;
    top: 65%;
    left: 90%;
    animation-duration: 210s;
    animation-delay: -353s;
    transform-origin: 12vw 18vh;
    box-shadow: 2vmin 0 1.0620314047932844vmin currentColor;
}

.background .animate span:nth-child(33) {
    color: #FFACAC;
    top: 32%;
    left: 93%;
    animation-duration: 481s;
    animation-delay: -412s;
    transform-origin: -2vw -1vh;
    box-shadow: -2vmin 0 1.1545382138297713vmin currentColor;
}

.background .animate span:nth-child(34) {
    color: #FFACAC;
    top: 16%;
    left: 13%;
    animation-duration: 199s;
    animation-delay: -436s;
    transform-origin: -4vw -1vh;
    box-shadow: -2vmin 0 0.6594037271849579vmin currentColor;
}

.background .animate span:nth-child(35) {
    color: #583C87;
    top: 33%;
    left: 59%;
    animation-duration: 418s;
    animation-delay: -135s;
    transform-origin: -5vw -11vh;
    box-shadow: -2vmin 0 0.7255188098456702vmin currentColor;
}

.background .animate span:nth-child(36) {
    color: #E45A84;
    top: 46%;
    left: 77%;
    animation-duration: 121s;
    animation-delay: -350s;
    transform-origin: 18vw 23vh;
    box-shadow: -2vmin 0 0.7649869473501048vmin currentColor;
}

.background .animate span:nth-child(37) {
    color: #583C87;
    top: 10%;
    left: 13%;
    animation-duration: 70s;
    animation-delay: -137s;
    transform-origin: 8vw 16vh;
    box-shadow: 2vmin 0 0.48483710665011714vmin currentColor;
}

.background .animate span:nth-child(38) {
    color: #FFACAC;
    top: 13%;
    left: 6%;
    animation-duration: 59s;
    animation-delay: -231s;
    transform-origin: 7vw 14vh;
    box-shadow: -2vmin 0 0.6092723901163902vmin currentColor;
}

.background .animate span:nth-child(39) {
    color: #583C87;
    top: 23%;
    left: 4%;
    animation-duration: 255s;
    animation-delay: -191s;
    transform-origin: -20vw -10vh;
    box-shadow: 2vmin 0 0.2644452345136812vmin currentColor;
}

.background .animate span:nth-child(40) {
    color: #E45A84;
    top: 62%;
    left: 42%;
    animation-duration: 95s;
    animation-delay: -126s;
    transform-origin: -1vw 11vh;
    box-shadow: 2vmin 0 0.46980991396236305vmin currentColor;
}




.crab-b {
    text-align: center;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 70px;
    background-color: #f26464;
    margin: auto;
    background-color: #fff;
    width: 1200px;

}

.btn--primary-b {
    background: #ffffff;
    color: #903cf5;
    font-weight: 650;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    padding: 20px 22px;

}

.btn--primary-b:hover {
    background: #6c7ff2;
}


#ageb {
    font-size: 3em;
}

#birth_date_when {
    width: 200px;
    background: #320039;
    color: #a3a3a3;
    font: inherit;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
    border: 0;
    outline: 0;
    padding: 22px 18px;
    margin: 20px;
}

#ageb {
    color: black;


}

.enter-age {
    color: black;
}


.info-age {
    color: black;
}

#smallAge,
#mediumAge,
#largeAge {
    font-size: 1.5em;
    color: black;
    margin-top: 30px;

}

.dog-infotext {
    display: flex;
}



/* tos */

.tos-home {
    padding-top: 70px;
    margin-top: 30px;
    margin-bottom: 50px;
    border-radius: 5px;
    color: white;
}

.tos-content {
    margin-right: auto;
    margin-left: auto;
    width: 50%;
}

.tos-home h2 {
    text-align: center;
    font-size: 1.3em;
    margin-bottom: 30px;
}

.tos-home h1 {
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 60px;
}


.tos-home p {
    margin-bottom: 20px;
}

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

    .crab-b,
    .calcul-config {
        width: 800px;
    }

    /* pet age */
    .container-pet {

        width: 800px;

    }


}



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

    .crab-b,
    .calcul-config {
        width: 600px;
    }

    .container-pet {

        width: 600px;

    }

    .bloc-panel-desc {
        display: block;
    }

    .dog-infoimg {
        margin-left: 40%;
    }

    .panel-age-info .title-animal,
    #dog-light,
    #dog-medium,
    #dog-big {
        color: rgb(0, 0, 0);
        font-size: 1em;
        margin-top: 10px;
    }

    .panel-age-info .title-dog {
        color: rgb(0, 0, 0);
        font-size: 1em;
        margin-top: 10px;
        font-weight: 600;
    }

    .dog-infotext {
        display: flex;
    }


    .calcul-config {
        padding: 30px;
    }

    #ageb {
        font-size: 1.3em;
    }

    .deco-title-home h1,
    .age-teasing {
        font-size: 2.9em;
    }

    .deco-title-home h2 {
        font-size: 1.2em;
    }

    .intro-p1 {
        display: contents;
        text-align: center;
    }

    #age-fix {
        font-size: 1.2em;
    }

    .intro-p1-img {
        text-align: center;
    }

    .paire {
        display: contents;
    }

}

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

    .crab-b,
    .calcul-config {
        width: 400px;
    }

    #ageb {
        font-size: 1.3em;
    }

    .paire {
        display: contents;
    }

    .container-pet {

        width: 400px;

    }


}