/* Standard styling */

body {
    background-size: contain;
}

.playground {
    position: absolute;
    left: -150%;
}

.playground2 {
    position: absolute;
    left: 30%;
}

/* Animations */

/*.wheel.spin {
animation: spin 4s ease-in-out alternate;
animation-fill-mode: forwards;
}*/

#wheel1.spin {
    animation: spin 4s ease-in-out alternate;
    animation-fill-mode: forwards;
}

#wheel2.spin {
    animation: spin 4s ease-in-out alternate;
    animation-fill-mode: forwards;
}

#wheel3.spin {
    animation: spin 4s ease-in-out alternate;
    animation-fill-mode: forwards;
}

#wheel4.spin {
    animation: spin 4s ease-in-out alternate;
    animation-fill-mode: forwards;
}

#wheel5.spin {
    animation: spin 4s ease-in-out alternate;
    animation-fill-mode: forwards;
}

#wheel6.spin {
    animation: spin 4s ease-in-out alternate;
    animation-fill-mode: forwards;
}

#wheel7.spin {
    animation: spin 4s ease-in-out alternate;
    animation-fill-mode: forwards;
}

.wheel.spinfinish {
    animation: spinfinish 2.8s ease-in-out infinite;
    animation-fill-mode: forwards;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(720deg);
    }
}

@keyframes spinfinish {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(720deg);
    }
}

.frame .wheel {
    position: absolute;
    width: 90px;
    height: 90px;
}

html, body {
    widht: 100%;
    height: 100%;
    overflow-x: hidden;
    background: #efefef;
    margin: 0;
    padding: 0;
}



.frame {
    overflow: hidden;
    position: relative;
    width: 800px;
    height: 800px;
    z-index: 1;
}

.arrows {
    opacity: 0.3
}

.arrows:hover {
    cursor: pointer
}

/*#playArea{
opacity: 0.4;
}
.playground{
opacity: 0.6
}*/

.frame #wheel1 {
    left: 103px;
    top: 190px;
}

.frame #wheel2 {
    right: 110px;
    top: 190px;
}

.frame #wheel3 {
    left: 155px;
    top: 340px;
}

.frame .wheel {
    position: absolute;
    width: 110px;
    height: 110px;
}

.frame #wheel4 {
    right: 134;
    top: 340px;
}

.frame #wheel3, .frame #wheel4 {
    width: 135px;
    height: auto;
}

#wheel5, #wheel6 {
    width: 70px;
    height: 70px;
}

#wheel6 {
    right: 100px;
    top: 210px;
}

#wheel5 {
    top: 210px;
    left: 372px;
}

#wheel7 {
    width: 60px;
    height: 60px;
    top: 220px;
    left: 123px;
}

#playsecond {
    transform: scale(1.5, 1.5);
}

#playfirst {
    transform: scale(1.2, 1.2);
}

#playArea {
    opacity: 0.4
}

/*DESKTOP*/

@keyframes drive {
    from {
        left: -150%;
    }
    to {
        left: 28%;
    }
}

/*1200 || 1400*/

@keyframes drive2 {
    from {
        left: -120%;
    }
    to {
        left: 18%;
    }
}

/*1000 || 1200 */

@keyframes drive3 {
    from {
        left: -120%;
    }
    to {
        left: 10%;
    }
}

@keyframes next3 {
    from {
        left: 10%;
    }
    to {
        left: 150%;
    }
}

@keyframes drive4 {
    from {
        left: -120%;
    }
    to {
        left: 7%;
    }
}

@keyframes next4 {
    from {
        left: 7%;
    }
    to {
        left: 150%;
    }
}

@keyframes drivemoto4 {
    from {
        left: -150%;
    }
    to {
        left: 20%;
    }
}

@keyframes finishMoto4 {
    from {
        left: 20%;
    }
    to {
        left: 150%;
    }
}

@keyframes drivemoto3 {
    from {
        left: -150%;
    }
    to {
        left: 30%;
    }
}

@keyframes finishMoto3 {
    from {
        left: 30%;
    }
    to {
        left: 150%;
    }
}

@keyframes next2 {
    from {
        left: 18%;
    }
    to {
        left: 150%;
    }
}

@keyframes drivemoto2 {
    from {
        left: -150%;
    }
    to {
        left: 35%;
    }
}

@keyframes finishMoto2 {
    from {
        left: 35%;
    }
    to {
        left: 150%;
    }
}

@keyframes drivemoto {
    from {
        left: -150%;
    }
    to {
        left: 40%;
    }
}

@keyframes next {
    from {
        left: 30%;
    }
    to {
        left: 150%;
    }
}

@keyframes finishMoto {
    from {
        left: 40%;
    }
    to {
        left: 150%;
    }
}

/*Auto*/

#pacchettiAuto.showPack {
    animation: showPack 1s;
    animation-fill-mode: forwards;
}

@keyframes showPack {
    0% {
        transform: scale(0.4, 0.4);
    }
    100% {
        transform: scale(1);
    }
}

/*Moto*/

#pacchettiMoto.showPackMoto {
    animation: showPackMoto 1s;
    animation-fill-mode: forwards;
}

@keyframes showPackMoto {
    0% {
        transform: scale(0.4, 0.4);
    }
    100% {
        transform: scale(1);
    }
}

#pacchettiMoto>.row>.col-md-6>h6 {
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: 34px;
    text-transform: uppercase;
}

#pacchettiAuto>.row>.col-md-4>a>img {
    transition: all .2s ease-in-out;
}

#pacchettiAuto>.row>.col-md-4>a>img:hover {
    transform: scale(1.1, 1.1);
    cursor: pointer;
}

#pacchettiMoto>.row>.col-md-6>a>img, #pacchettiMoto>.row>.col-md-6>.row>.col-md-12>a>img {
    transition: all .2s ease-in-out;
}

#pacchettiMoto>.row>.col-md-6>a>img:hover, #pacchettiMoto>.row>.col-md-6>.row>.col-md-12>a>img:hover {
    transform: scale(1.1, 1.1);
    cursor: pointer;
}

.playground>.frame>img:hover {
    cursor: pointer;
}

@media (max-width: 800px) {
    #playthird {
        left: -120%;
        transform: scale(1, 1);
    }
    #playfirst {
        transform: scale(0.8, 0.8);
    }
}

@media (min-width: 1400px) {
    #playthird {
        transform: scale(2, 2);
    }
}

@media (max-width: 1400px) {}

@media (max-width: 1600px) {
    #playthird {
        transform: scale(1.6, 1.6);
        top: 45% !important;
    }
}

@media (min-width: 1400px) {
    .playground.drive {
        animation: drive 4s ease-in-out alternate;
        animation-fill-mode: forwards;
    }
    .playground.next {
        animation: next 4s linear alternate;
        animation-fill-mode: forwards;
    }
    .playground.drivemoto {
        animation: drivemoto 4s ease-in-out alternate;
        animation-fill-mode: forwards;
    }
    .playground.finishMoto {
        animation: finishMoto 4s linear alternate;
        animation-fill-mode: forwards;
    }
}

@media (min-width: 1200px) and (max-width: 1400px) {
    .playground.drive2 {
        animation: drive2 4s ease-in-out alternate;
        animation-fill-mode: forwards;
    }
    .playground.next2 {
        animation: next2 4s linear alternate;
        animation-fill-mode: forwards;
    }
    .playground.drivemoto2 {
        animation: drivemoto2 4s ease-in-out alternate;
        animation-fill-mode: forwards;
    }
    .playground.finishMoto2 {
        animation: finishMoto2 4s linear alternate;
        animation-fill-mode: forwards;
    }
    #pacchettiMoto {
        left: 5% !important;
    }
    #pacchettiAuto {
        left: 0px !important;
    }
    #playthird {
        transform: scale(1.4);
        top: 42% !important;
    }
}

@media (min-width: 1000px) and (max-width: 1200px) {
    .playground.drive3 {
        animation: drive3 4s ease-in-out alternate;
        animation-fill-mode: forwards;
    }
    .playground.next3 {
        animation: next3 4s linear alternate;
        animation-fill-mode: forwards;
    }
    .playground.drivemoto3 {
        animation: drivemoto3 4s ease-in-out alternate;
        animation-fill-mode: forwards;
    }
    .playground.finishMoto3 {
        animation: finishMoto3 4s linear alternate;
        animation-fill-mode: forwards;
    }
    #playfirst {
        transform: scale(1.0, 1.0);
        top: 35% !important;
    }
    #playsecond {
        transform: scale(1.2, 1.2);
        top: 43% !important;
    }
    #playthird {
        transform: scale(1.1, 1.1);
        top: 38% !important;
    }
    #pacchettiAuto {
        top: 45% !important;
        left: 5% !important;
    }
    #pacchettiMoto {
        left: 0px !important;
    }
    #playthird {
        transform: scale(1.4);
        top: 42% !important;
    }
}

@media (min-width: 800px) and (max-width: 1000px) {
    .playground.drive4 {
        animation: drive4 4s ease-in-out alternate;
        animation-fill-mode: forwards;
    }
    .playground.next4 {
        animation: next4 4s linear alternate;
        animation-fill-mode: forwards;
    }
    .playground.drivemoto4 {
        animation: drivemoto4 4s ease-in-out alternate;
        animation-fill-mode: forwards;
    }
    .playground.finishMoto4 {
        animation: finishMoto4 4s linear alternate;
        animation-fill-mode: forwards;
    }
    #playfirst {
        transform: scale(0.8);
        top: 35% !important;
    }
    #playsecond {
        transform: scale(1.0);
        top: 43% !important;
    }
    #playthird {
        transform: scale(0.9);
        top: 35% !important;
    }
    #pacchettiAuto {
        top: 45% !important;
        left: 0% !important;
    }
    #pacchettiMoto {
        left: 0px !important;
    }
}

@media (max-width: 800px){
    #animation{
        display: none;
    }
}

.arrows {
    opacity: 0.3
}

.arrows:hover {
    cursor: pointer
}

#playArea {
    opacity: 0.6;
}

#pacchettiAuto {
    top: 30%;
    display: none;
}

#pacchettiMoto {
    top: 20%;
    display: none;
}

.categories>.row>.col-md-2>h4 {
    font-family: 'Cookie', sans-serif;
    color: black;
    font-size: 18px;
    margin-top: 4%;
    font-weight: bold;
}

.categories>.row {
    margin-top: 3%;
}

.corso_pratica .carousel .item::before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgb(33, 33, 33);
    display: inline-block;
    width: 50.5%;
    z-index: 1;
    -webkit-clip-path: polygon(0 0, 70% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 70% 0, 100% 100%, 0% 100%);
}


.corso_teoria .carousel .item::before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgb(33, 33, 33);
    display: inline-block;
    width: 50.5%;
    z-index: 1;
    -webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
    margin-left: 50%;
}

.patenti {
    list-style-type: none;
    line-height: 1.6
}

.patenti>li>a {
    color: white;
    font-size: 20px;
}

.patenti>li>a:hover {
    text-decoration: none;
    font-weight: bold;
    color: #e30613;
}

@media (max-width: 1500px) {

    .corso_pratica .carousel .item::before,
    .corso_teoria .carousel .item::before {
        width: 100%;
        opacity: 0.75;
        -webkit-clip-path: none;
        clip-path: none;
        margin-left: 0;
    }
}

#scroll-a, #scroll-b, #scroll-c, #scroll-d  {
  color: #F0FFFF;
  font-size: 4em;
  font-weight: 200;
}

@keyframes bounce {
  to {
    transform: rotate(45deg) translateY(2rem) translateX(2rem);
    opacity: 0;
  }
}
@keyframes bounce {
  to {
    transform: translateX(2rem);
    opacity: 0;
  }
}

.patenti{
    display:inline;
    width: 50%;
    
}

@media (max-width: 1024px){
    #playArea{
        background-size: cover !important;
    }
}

@media (max-width: 500px) {
    #corso_pratica {
        background-image: none !important;
        background-color: #202020 !important;
    }
}

* {
    -webkit-overflow-scrolling: touch !important
}