*{
     margin: 0px;
     padding: 0px;
     box-sizing: border-box;
}

.main{
     display: flex;
     flex-flow: column nowrap;
     align-items: center;
     background: linear-gradient(to right, #1e1e1e, #343a40);

 }

h1{
    text-align: center;
    color: #eeeeee;
    font-size: 55px;
    font-family: 'Roboto Slab', serif;
    font-weight: normal;
}

h2{
     color: darkturquoise;
     font-size: 35px;
     text-align: center;
     font-family: 'Roboto Slab', serif;
     font-weight: normal;
}

a h4{
    color: #eeeeee;
    text-decoration: none;
}


a h4:hover{
    color: darkturquoise;
}

a{
    text-decoration: none;
    margin: 0px;
    padding: none;
}

.footer h3{
    text-align: center;
    color: #343a40;
    font-size: 25px;
    font-family: 'Roboto Slab', serif;
    font-weight: normal;
    margin-bottom: 10px;
}

ul{
    list-style: none;
    justify-content: flex-start;
    margin-bottom: 30px;
    text-align: center;
    font-family: 'Montserrat';
}

ul a:hover {
    color: darkturquoise
}

ul a:active{
    color: #343a40;
}

ul a{
    text-decoration: none;
    color: #343a40;
}

li{
    margin-bottom: 5px;
}

p{
    text-align: center;
    font-size: 22px;
    font-family: 'Montserrat';
    color: #eeeeee
}

section{
     height: 1000px;
     width: 100%;
}

.header{
     display: flex;
     flex-flow: column nowrap;
     width: 100%;
     background-color: #1e1e1e;
     position: relative;    
     box-shadow: 0 20px 55px -15px #eeeeee;
}

.nav{
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     padding: 20px;
     flex-direction: column;
 }

.logo{
     flex: 1 1 auto;
     align-items: center;
     text-align: center;
}

.logo-img{
     height: auto;
     width: 80%;
     margin-bottom: 10px;
 }
 
.social{
     flex: 1 1 auto;
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
 }

.fab{
     flex: 1 1 auto;
     padding: 10px;
     margin: 10px;
     color: #1e1e1e;
     background-color: #eeeeee;
     border-radius: 15px;
     width: 72px;
     height: 72px;
     box-shadow: inset -5px -5px 10px 0  rgba(0,0,0,0.7);
     text-align: center;
 }

.fab:hover{
    color: darkturquoise;
    box-shadow: inset 5px 5px 10px 0  rgba(0,0,0,0.7);
 }

.hero{
     display: flex;
     flex-flow: row nowrap;
     flex-direction: column-reverse;
     align-items: center;
     text-align: center;
 }

.profile{
     align-self: center;
     width: 100%;
     flex: 1 1 auto;
     margin-top: 30px;
 }

.profile-pic{
     height: auto;
     width: 100%;
     -webkit-filter: drop-shadow(0px 0px 7px darkturquoise);
      filter: drop-shadow(0px 0px 12px darkturquoise);
 }

.title{
    text-align: inherit;
    font-size: 40px;
    flex: 1 1 auto;
    font-family: 'Montserrat';
    color: #eeeeee;
 }

.lebalap-academy{
     margin-top: 170px;
     color: #eeeeee;
     display: flex;
     flex-flow: column;
     align-content: center;
 }

.lebalap-academy-logo{
    flex: 1 2 auto;
}

.lebalap-academy-title{
    color: #eeeeee;
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 15px;
    text-indent: 5px;
    margin-left: 12px;
 }

.lebalap-line{
    border: 2px solid darkturquoise;
    border-radius: 2px;
    margin: -54px 10% 104px 10%;
}

.lebalap-academy-description{
    flex: 1 1 auto;
}

.courses{
    flex: 1 1 auto;
    margin-top: 50px;
    display: flex;
    overflow-x: auto;
}

.course-card{
    background: linear-gradient(to bottom, #1e1e1e, #343a40);
    background-color: white;
    margin: 10px 20px 25px 20px;
    padding-bottom: 20px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    border-radius: 15px;
    height: 350px;
    min-width: 250px;
    box-shadow: 0px 0px 10px 5px darkturquoise;
}

.card-image{
    flex: 2.5 1 auto;
    width: auto;
    height: 150px;
    padding-top: 20px;   
}

.card-title{
    flex: 1 1 auto;
    text-align: center;
    font-family: 'Roboto Slab';
    padding: 4px 5px 10px 5px;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    justify-content: center;
}

.card-button{
    flex: 1 1 auto;
    text-decoration: none;
    background-color: #eeeeee;
    padding: 00px 10px;
    border-radius: 30px;
    font-family: 'Montserrat';
    color: darkturquoise;
    font-weight: 600;
    font-size: 20px;
    display: flex;
    align-items: center;
}

.lebalaprp{
    display: flex;
    flex-flow: column nowrap;
}

.lebalaprp-presentation{
    flex: 2 1 auto;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    padding: 0 15px;
}

.lebalaprp-image-container{
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.lebalaprp-image{
    width: 80%;
    height: auto;
    align-self: center;
}

.lebalaprp-description{
    margin: 20px 0;
}

.lebalaprp-buttons{
    flex: 2 1 auto;
    display: flex;
    flex-flow: column nowrap;
    margin-top: 50px;
    padding: 0 15px;
    align-items: center;
}

.lebalaprp-button-real,.lebalaprp-button-simracing {
    text-decoration: none;
    font-weight: 600;
    margin: 15px 0;
    border-radius: 20px;
    font-family: 'Montserrat';
    font-size: 20px;
    color: #343a40;
}

.lebalaprp-button-real{
    background-color: darkturquoise;
    box-shadow: 0px 0px 8px 3px #eeeeee;
    padding: 10px 35px;
}

.lebalaprp-button-simracing{
    background-color: #eeeeee;
    box-shadow: 0px 0px 8px 3px darkturquoise;
    padding: 10px 40px;
}

.books{
    display: flex;
    padding-top: 50px;
    flex-flow: column;
}

.books-texts{
    flex: 1 1 auto; 
    padding-top: 40px;
}

.books-description{
    color: #eeeeee;
    margin-top: 30px;
    margin-bottom: 30px;
}

.books-container{
    flex: 4 1 auto;
    margin-top: 50px;
    display: flex;
    overflow-x: auto;
}

.book{
    margin: 10px 40px 25px 40px;
    display: flex;
    height: 300px;
    min-width: 200px;
}

.book-image{
    border-radius: 15px;
    box-shadow: 0px 0px 3px 3px  darkgray;
}

.podcast{
    display: flex;
    flex-flow: column nowrap;
    color: #eeeeee;
}

.podcast-image-container{
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.podcast-image{
    width: 80%;
    height: auto;
    border-radius: 15px;
    margin-bottom: 50px;
    align-self: center;
    box-shadow: 0px 0px 10px 5px darkturquoise;
}

.subscription{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

.subscription-info{
    flex: 1 1 auto;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

.subscription-description{
    margin: 40px 20px;
}

.subscription-video{
    justify-content: center;
    margin-bottom: 50px;
}

.subscription-form{
    flex: 1 1 auto;
    color: #eeeeee;
    font-family: 'Montserrat';
    font-weight: 500px;
}

input{
    border-radius: 15px !important;
    height: 30px;
    font-family: 'Montserrat';
    font-size: 17px;
    padding-left: 10px !important;
}

.subscription-button-container{
    display: flex;
    justify-content: center;
}

.subscription-button{
    text-decoration: none;
    font-weight: 600;
    margin: 15px 0;
    border-radius: 500px !important;
    font-family: 'Montserrat';
    font-size: 20px;
    color: #1e1e1e;
    background-color: #eeeeee !important;
    padding: 5px 25px 30px 25px !important;
}

.contact{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin: 10;
}

.contact-form{
    width: 80%;
}

.contact-description{
    margin-top: 50px;
    margin-bottom: 50px;
}

.form-control{
    border: 0;
    margin-bottom: 15px;
    width: 100%;
    height: 35px;
    border-radius: 18px;
}

textarea{
    border-radius: 15px;
    width: 100%;
    height: 150px !important;
    padding: 10px;
    font-family: 'Montserrat';
    font-size: 15px;
}

.contact-button-container{
    display: flex;
    justify-content: center;
}

.contact-button{
    text-decoration: none;
    border: 0;
    font-weight: 600;
    margin: 15px 0;
    border-radius: 500px !important;
    font-family: 'Montserrat';
    font-size: 20px;
    color: #1e1e1e;
    background-color: #eeeeee !important;
    padding: 5px 25px 30px 25px !important;
}

#footer{
    height: auto;
    width: 100%;
    background-color: #eeeeee;
}

.footer{
    height: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 5px 5px #eeeeee;
}


@media all and (min-width: 1100px) {
    
    /* width */
    ::-webkit-scrollbar {
        width: 15px;
    }
    
    /* Track */
    ::-webkit-scrollbar-track {
        box-shadow: 0 0 2px 1px grey; 
        border-radius: 10px;
    }
    
    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: darkturquoise; 
        border-radius: 10px;
    }
    
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #1e1e1e; 
    }

    h1{
        font-size: 80px;
    }

    p{
        font-size: 30px;
    }

    .nav{
        flex-direction: row;
    }

    .logo{
        text-align: left;
    }

    .logo-img{
        height: 80px;
        width: auto;
        max-width: 100%;
        padding-left: 20px;
    }

    .social{
        justify-content: flex-end;
        text-align: center;
    }

    .fab{
        margin: 20px;
    }

    .hero{
        display: flex;
        flex-flow: row nowrap;
        align-items: right;
        height: 720px;
    }
   
    .profile{
        flex: 1 1 auto;
        width: auto;
    }
   
    .profile-pic{
        height: 70vh;
        width: auto;
    }
   
    .title{
       flex: 1 1 auto;
       text-align: justify;
       font-size: 60px;
       padding-left: 200px;
    }
    
    .lebalap-academy{
        margin-top: 120px;
        display: flex;
        align-content: center;
    }
   
    .lebalap-academy-logo{
        text-align: center;
        margin-bottom: 70px;
    }

    .lebalap-academy-title{
       color: #eeeeee;
       font-size: 70px;
       font-weight: normal;
       letter-spacing: 15px;
       text-indent: 5px;
       margin-left: 12px;
       display: inline-block;
       text-align: center;
    }

    .lebalap-academy-title::after{
        content:'';
        display: block;
        border-top: 6px solid darkturquoise;
        margin-top: 0.5 rem;
        border-radius: 5px;
    }
   
   .lebalap-line{
       display: none;
   }


   .lebalap-academy-description{
        flex: 1 1 auto;
        margin-bottom: 50px;
   }

   .courses{
        flex: 1 4 auto;
        margin-top: 50px;
        display: flex;
        overflow-x: auto;
   }

   .course-card{
        background: linear-gradient(to bottom, #1e1e1e, #343a40);
        margin: 10px 20px 25px 20px;
        padding-bottom: 20px;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        border-radius: 15px;
        height: 450px;
        min-width: 350px;
        box-shadow: 0px 0px 10px 5px darkturquoise;
   }

   .card-image{
        flex: 2.5 1 auto;
        width: auto;
        height: 190px;
        padding: 0 0;   
   }

    .card-title{
        flex: 1 1 auto;
        font-size: 30px;
        padding: 4px 10px 20px 10px;
        font-weight: 400;
        text-align: center;
        justify-content: center;
    }

    .card-button{
        flex: 1 1 auto;
        text-decoration: none;
        background-color: #eeeeee;
        padding: 5px 20px 5px 20px;
        border-radius: 40px;
        font-family: 'Montserrat';
        color: #343a40;
        font-weight: 600;
        font-size: 25px;
        display: flex;
        align-items: center;
    }

    .card-button:hover{
        color: darkturquoise !important;
        box-shadow: 0 0 5px 5px darkturquoise;
    }
    .lebalaprp-presentation{
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        margin-top: 150px;
    }
    
    .lebalaprp-image-container{
        flex: 1 1 auto;
        margin: 0 50px;
        display: flex;
    }
    
    .lebalaprp-image{
        width: 500px;
        margin: 0px;
        padding: 0px;
        align-self: flex-end;
    }
    
    .lebalaprp-description{
        flex: 1 1 auto;
        align-self: center;
        width: 500px;
        padding: 100px;
    }

    .lebalaprp-button-real,.lebalaprp-button-simracing {
        margin: 25px 0;
        border-radius: 40px;
        font-size: 35px;
    }
    
    .lebalaprp-button-real{
        padding: 20px 65px;
    }
    
    .lebalaprp-button-simracing{
        padding: 20px 80px;
    }
    
    .lebalaprp-button-real:hover{
        color: #eeeeee;
    }
    
    .lebalaprp-button-simracing:hover{
        color: darkturquoise;
    }

    .books{
        padding-top: 0px;
        width: 100%;
    }

    .books-title{
        font-size: 70px;
    }

    .books-description{
        font-size: 30px;
        color: #eeeeee;
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .books-container{
        flex: 1 1 auto;
        margin-top: 0px;
        display: flex;
    }

    .book{
        flex: 1 1 auto;
        justify-content: center;
        height: 500px;
        width: 60px;
    }

    .book-image{
        border-radius: 15px;
        box-shadow: 0px 0px 3px 3px  darkgray;
    }

    .book-image:hover{
        border-radius: 15px;
        box-shadow: 0px 0px 4px 4px  darkturquoise;
    }

    .podcast{
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }

    .podcast-image-container{
        flex: 1 1 auto;
        margin-bottom: 0;
        justify-content: center;
    }

    .podcast-image{
        max-width: 500px;
        margin: 0px;
        padding: 0px;
    }

    .podcast-text{
        flex: 1.5 1 auto;
        align-self: center;
        width: 500px;
        padding: 100px;
    }

    .subscription{
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }

    .subscription-info{
        flex: 1 1 auto;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        align-content: center;
    }

    .subscription-button:hover{
        color: darkturquoise;
        box-shadow: 0px 0px 4px 4px  darkturquoise;
    }
    
    .subscription-title{
        font-size: 70px;
    }

    .subscription-description{
        max-width: 750px;
        margin: 50px 0;
    }
    
    .subscription-video{
        min-width: 500px;
        height: 250px;
        margin-bottom: 0px;
        width: auto;
    }
    
    .video-iframe{
        width: 100%;
        height: 100%;
        justify-content: center;
    }

    .subscription-form{
        flex: 1 1 auto;
        max-width: 750px;
        margin-right: 150px;
        text-align: center;
    }

    .contact{
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        margin-top: 100px;
    }
    
    .contact-form{
        width: 800px;
    }
    
    .contact-title{
       font-size: 70px;
    }
    
    .contact-button:hover{
        color: darkturquoise;
        box-shadow: 0px 0px 4px 4px  darkturquoise;
    }

    #footer{
        height: auto;
        width: 100%;
        background-color: #eeeeee;
    }
    
    .footer{
        height: 100%;
        padding: 40px 100px 40px 100px;
        display: flex;
        flex-flow: row nowrap;
        box-shadow: 0px 0px 5px 5px #eeeeee;
    }

    .footer-column{
        flex: 1 1 auto;
        align-self: flex-start;
    }    

}