.modal-size-pip {
    min-height: 710px;
    min-width: 800px;
}

.btn_white_PIP {
    background: #ffffff;
    color: #F16625;
    font-size: 30px;
}

.btn_white_PIP:hover {
    background-color: #F16625;
    color: white;
}   

.btn:focus, .btn.focus {
    box-shadow: none;
}

.btn_site {
    text-transform: none;
}

.btn_PIP {
    text-decoration: none;
    text-transform: none;
    font-family: "Comic sans MS";
    cursor: pointer;
    display: inline-block;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    text-align: center;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    min-width: 100%;
    margin: 5px;
    border-radius: 10px;
    opacity: 0;
    animation-fill-mode: forwards;
    padding: 5px;
}

.animate-buttons {
    opacity: 0;
    animation: bounceFromTop 1s ease forwards; 
}

.btn_PIP_error {
    min-width: 190px;
    font-size: 15px;
}

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

.btn_toggle.active {
    background-color: #F16625; 
    color: white; 
    border-color: #F16625; 
}

.pip-modal-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    align-self: center;
    align-content: center;
    min-width: 650px; 
}

.pip-card {
    border-radius: 3rem;
    padding: 0.5rem; 
 
}

.pip-explanation-row {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3%;
}

#match {
    display: flex;
}

.card-effect {
    animation: slideLeft 0.3s forwards;
}

.hidden {
    display: none;
}

.appear {
    animation: slideRight 0.3s forwards; 
}

#words {
    display: flex;
    flex-wrap: wrap;
}

.img-woman-child {
    background-image: url("https://resources.cdn.haylem.ca/250/preparation-teleorthophonie-preparer-enfant_250.png");
    background-repeat: no-repeat;
    position: absolute;
    margin-top: 15%;
    height: -webkit-fill-available;
    width: -webkit-fill-available;
    opacity: 0.3;
}

.logo-haylem-rond {
    background-image: url("https://resources.cdn.haylem.ca/250/favicon-haylem_250.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
    height: 800px;
    width: 800px;
    position: absolute;
    margin-top: 15%;
    margin-left: 30%;
    transform: rotate(20deg);
    opacity: 0.2;
}

.logo-lexibar {
    width: 35%;
    margin-bottom: 6%;
    margin-top: 1%;
}

.modal-footer {
    position: relative;
}

#wordError {
    position: relative;
}

#wordError.cross-out:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 35%;
    width: 0%;
    height: 2px; 
    background-color: black;
    animation: crossOutAnimation 1s forwards;
}

.arrow {
    width:100px;
    height:30px;
    display: flex;
    margin-top: 15px;
}

.arrow:before {
    content: "";
    background: currentColor;
    width:15px;
    clip-path: polygon(0 10px,calc(100% - 15px) 10px,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 10px),0 calc(100% - 10px));
    animation: a1 1.5s forwards;
}

#correctWord {
    opacity: 0;
}

.fadeIn {
    animation: fadeIn 2s forwards;
}

/*  Animations  */
@keyframes bounceFromTop {
    0% { transform: translateY(-100%); opacity: 0;}
    25% { transform: translateY(0); opacity: 0.25;}
    50% { transform: translateY(-30px); opacity: 0.5;}
    75% { transform: translateY(0); opacity: 0.75;}
    100% { transform: translateY(0); opacity: 1;}
}

@keyframes slideLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
        opacity: 0; 
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(100%);
        opacity: 0; 
    }
    100% {
        transform: translateX(0);
        opacity: 1; 
    }
}

@keyframes crossOutAnimation {
    from {
      width: 0%;
    }
    to {
      width: 100%;
    }
}

@keyframes a1 {
    to{flex-grow: 1;}
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/*  Responsive  */
@media screen and (max-width: 800px){
    .modal-size-pip {
        min-height: 556px;
        min-width: 0;
    }

    .pip-modal-body {
        min-width: 0;
    }

    .logo-haylem-rond {
        margin-left: 20%;
    }

    .btn_white_PIP {
        font-size: 20px;
    }

    .btn_PIP_error {
        min-width: 105px;
        font-size: 10px;
    }

    .arrow {
        margin-top: 5px;
    }
    
    .img-woman-child {
        background-image: url("https://resources.cdn.haylem.ca/100/preparation-teleorthophonie-preparer-enfant_100.png");
    }
}