.cover-tutorial{
    background-repeat: no-repeat; background-size: 100%; padding: 73px 0;
}

.position-content{
    display: block;margin: 0 auto;
}

.cover-tutorial-spec{
    max-width: 350px;
}

.cover-tutorial h1{
    margin-bottom: 0;
}

.cover-tutorial hr{
    width: 40%; margin-top: 10px;
}

.btn-model{
    display: block; margin: 25px auto 0 auto; padding: 7px 37px;
}

.learn-tutorial{
    padding: 76px;
}

.p-didact{
    margin-top: 30px;
}

.go-tournament{
    background-repeat: no-repeat; background-size: 100%; padding: 83px 0;
}

/* tutorial modals */
.didactitielle .modal-dialog{
    max-width: 1080px;
    width:900px;
}

.didactitielle .modal-content{
    height: 600px;
}

.didactitielle .modal-body{
    overflow: hidden;
}

.didactitielle .bot-position{
    height: 600px;
    position: absolute;
    animation-name: movemybot;
    -moz-animation-name: movemybot;
    -o-animation-name: movemybot;
    -webkit-animation-name: movemybot;
    -moz-animation-duration: 1.5s;
    -o-animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@keyframes movemybot{
    0%{
        top: 30px;
    }

    50%{
        top: 35px;
    }

    100%{
        top: 30px;
    }
}

@-moz-keyframes movemybot{
    0%{
        top: 30px;
    }

    50%{
        top: 35px;
    }

    100%{
        top: 30px;
    }
}

@-o-keyframes movemybot{
    0%{
        top: 30px;
    }

    50%{
        top: 35px;
    }

    100%{
        top: 30px;
    }
}

@-webkit-keyframes movemybot{
    0%{
        top: 30px;
    }

    50%{
        top: 35px;
    }

    100%{
        top: 30px;
    }
}

.didactitielle .instruction-bubble{
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-size: 100%;
    width: 50%;
    height: 218px;
    float: right;
    padding: 2rem;
    animation-name: appearbubble;
    -moz-animation-name: appearbubble;
    -o-animation-name: appearbubble;
    -webkit-animation-name: appearbubble;
    animation-delay: 200ms;
    -o-animation-delay: 200ms;
    -moz-animation-delay: 200ms;
    -webkit-animation-delay: 200ms;
    animation-duration: 800ms;
    -moz-animation-duration: 800ms;
    -o-animation-duration: 800ms;
    -webkit-animation-duration: 800ms;
    -moz-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

@keyframes appearbubble{
    0%{
        transform: rotateX(89deg);
        -moz-transform: rotateX(89deg);
        -o-transform: rotateX(89deg);
        -webkit-transform: rotateX(89deg);
    }

    50%{
        transform: rotateX(45deg);
        -moz-transform: rotateX(45deg);
        -o-transform: rotateX(45deg);
        -webkit-transform: rotateX(45deg);
    }

    100%{
        transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
        -o-transform: rotateX(0deg);
        -webkit-transform: rotateX(0deg);
    }
}

.message-bubble{
    padding: 0 1em;
}

.btn-bubble{
    margin: 0 auto;
    padding: 6px 15px;
    width:100%;
    margin-bottom: 12px;
}

.scenario{
    padding: 1rem;
    width: 350px;
    position: absolute;
    top: 10%;
    left: 29%;
    z-index: 400;
}