@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');

*{

    padding:0;

    margin:0;

    box-sizing:border-box;

}



html body{

    margin:0px;

    padding:0px;

}





h1{



    font-family: 'Krona One', sans-serif;

}

h2{

    font-family: 'Krona One', sans-serif;

}

p{

    font-family: 'Krona One', sans-serif;

}

h3{

    font-family: 'Krona One', sans-serif;

}

a{

    font-family: 'Krona One', sans-serif;

    text-decoration:none;

}

/** NAVBAR MENU **/

.navbar-container{

    min-height:100vh;

    width:100%;

    background-color:#485461;

    background-image:linear-gradient(135deg, #485461 0%, #28313b 74%);

    overflow:hidden;

    transform-style:preserve-3d;

    margin:0;

    padding:0px;

}

.navbar-menu{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:10;

    height:3rem;

}

.menu{

    max-width:72rem;

    width:100%;

    margin:0 auto;

    padding:0 2rem;

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:white;

}

.logo{

    font-size:1.1rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:2px;

    line-height:4rem;

    align-items:center;

}

.logo span{

    font-weight:300;

}

.hamburger-menu{

    height:4rem;

    width:3rem;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:flex-end;

}

.bar{

    width:1.9rem;

    height:1.5px;

    background-color:#eee;

    transition:0.5s;

    position:relative;

}

.bar:before, .bar:after{

    content:'';

    position:absolute;

    width:inherit;

    height:inherit;

    background-color:#eee;

    transition:0.5s;

}

.bar:before{

    transform:translateY(-9px);

}

.bar:after{

    transform:translateY(9px);

}



.main{

    position:relative;

    width:100%;

    left:0;

    z-index:5;

    background-color:white;

    overflow:hidden;

    transform-origin:left;

    transform-style:preserve-3d;

    transition:0.5s;

}

.header{

    min-height:100vh;

    width:100%;

    background: url(../images/index/wingfoil/wingfoil.jpeg) 50% 50% no-repeat;

    position:relative;

}

.overlay{

    position:absolute;

    width:100%;

    height:100%;

    top:0;

    left:0;

    background-color:rgba(43,51,59,0.4);

    display:flex;

    justify-content:center;

    align-items:center;

}

.inner{

    max-width:80%;

    text-align:center;

    color:white;

    padding:0 2rem;

    

}

.mybutton{

    margin-top:20px;

    padding:10px 30px;

    font-size:20px;

    text-decoration:none;

    background-color:#ff9600;

    color:white;

    border-radius:10px;

    transition:0.5s;

    

}

.mybutton:hover{

    margin-top:20px;

    padding:10px 100px;

    font-size:20px;

    text-decoration:none;

    background-color:#00a8ff;

    color:white;

    border-radius:10px;

    transition:0.5s;

    

}

.title{

    font-size:2.7rem;

}

.title2{

    font-size:2rem;

}



.navbar-container.active .bar{

    transform:rotate(360deg);

    background-color:transparent;

}

.navbar-container.active .bar:before{

    transform:translateY(0) rotate(45deg);

    color:#ff9600;

}



.navbar-container.active .bar:after{

    transform:translateY(0) rotate(-45deg);

    color:#ff9600;

}



.navbar-container.active .main{

    animation: main-animation 0.5s ease;

    transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);

    cursor:pointer;

}



@keyframes main-animation{

    from{

        transform: translate(0);

    }

    to{

        transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);

    }

}

@keyframes responsive-main-animation{

    from{

        transform: translate(0);

    }

    to{

        transform: perspective(1300px) rotateY(17deg) translateZ(200px) scale(0.2);

    }

}



.links{

    padding-right:50px;

    position:absolute;

    width:30%;

    right:0;

    top:0;

    height:100vh;

    z-index:2;

    display:flex;

    justify-content:center;

    align-items:center;

}

ul{

    list-style:none;

}



.links a{

    text-decoration:none;

    padding:10px;

    color:white;

    display:inline-block;

    font-size:20px;

    font-weight:300;

    text-transform:uppercase;

    letter-spacing:1px;

    transition:0.3s;

    opacity:0;

    transform: translateY(10px);

    animation: hide 0.5s forwards ease;

}

.links a:hover{

    color:#ff9600;

}



.navbar-container.active .links a{

    animation: appear 0.5s forwards ease var(--i);

}



@keyframes appear{

    from{

        opacity:0;

        transform: translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0px);

    }

}



@keyframes hide{

    from{

        opacity:1;

        transform:translateY(0px);

    }

    to{

        opacity:0;

        transform: translateY(10px);

    }

}



.shadow{

    position:absolute;

    width:100%;

    height:100vh;

    top:0;

    left:0;

    transform-style:preserve-3d;

    transform-origin:left;

    transition:0.5s;

}

.shadow.one{

    z-index:-1;

    background-color:white;

    opacity:0.15;

}

.shadow.two{

    z-index:-2;

    background-color:white;

    opacity:0.1;

}



.navbar-container.active .shadow.one{

    animation:shadow-one 0.6s ease-out;

    transform: perspective(1300px) rotateY(20deg) translateZ(215px) scale(0.5);

}



@keyframes shadow-one{

    0%{

        transform:translate(0);

    }

    5%{

        transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);

    }

    100%{

        transform: perspective(1300px) rotateY(20deg) translateZ(215px) scale(0.5);

    }

}

@keyframes responsive-shadow-one{

    0%{

        transform:translate(0);

    }

    5%{

        transform: perspective(1300px) rotateY(17deg) translateZ(200px) scale(0.2);

    }

    100%{

        transform: perspective(1300px) rotateY(17deg) translateZ(100px) scale(0.2);

    }

}

.navbar-container.active .shadow.two{

    animation:shadow-two 0.6s ease-out;

    transform: perspective(1300px) rotateY(20deg) translateZ(120px) scale(0.5);

}



@keyframes shadow-two{

    0%{

        transform:translate(0);

    }

    20%{

        transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);

    }

    100%{

        transform: perspective(1300px) rotateY(20deg) translateZ(120px) scale(0.5);

    }

}

@keyframes responsive-shadow-two{

    0%{

        transform:translate(0);

    }

    20%{

        transform: perspective(1300px) rotateY(27deg) translateZ(200px) scale(0.2);

    }

    100%{

        transform: perspective(1300px) rotateY(17deg) translateZ(100px) scale(0.2);

    }

}







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

.navbar-container{

    height:100vh;

    width:100%;

}

.title{

    font-size:17px;

}

.title2{

    font-size:14px;

}

.mybutton{

    margin-top:20px;

    padding:10px 30px;

    font-size:14px;

    text-decoration:none;

    background-color:#ff9600;

    color:white;

    border-radius:10px;

    transition:0.5s;

    

}

.mybutton:hover{

    margin-top:20px;

    padding:10px 100px;

    font-size:14px;

    text-decoration:none;

    background-color:#00a8ff;

    color:white;

    border-radius:10px;

    transition:0.5s;

    

}

.description-windsurf{

    font-size:17px;

}

.card-text{

    font-size:14px;

}

.bar{

    width:30px;

    height:1.5px;

}

.menu{

    max-width:72rem;

    width:100%;

    margin:0 auto;

    padding-left:5px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:white;

}

.logo{

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:2px;

    align-items:center;

}

.links{

    margin-right:10px;

    position:absolute;

    width:30%;

    right:0;

    top:0;

    height:100vh;

    z-index:2;

    display:flex;

    justify-content:center;

    align-items:center;

}

.links a{

    text-decoration:none;

    padding:10px;

    color:white;

    display:inline-block;

    font-size:13px;

}

    

.shadow{

    position:absolute;

    width:50%;

    height:100vh;

    top:0;

    left:0;

    transform-origin:left;

    transform-style:preserve-3d;

    transition:0.5s;

}

.main{

    position:relative;

    width:100%;

    left:0;

    z-index:5;

    background-color:white;

    overflow:hidden;

    transform-style:preserve-3d;

    transition:0.5s;

}

.navbar-container.active .bar{

    transform:rotate(360deg);

    background-color:transparent;

}

.navbar-container.active .bar:before{

    transform:translateY(0) rotate(45deg);

}



.navbar-container.active .bar:after{

    transform:translateY(0) rotate(-45deg);

}



.navbar-container.active .main{

    animation: responsive-main-animation 0.5s ease;

    transform: perspective(1300px) rotateY(10deg) translateZ(310px) scale(0.2);

    cursor:pointer;

}

.navbar-container.active .shadow.one{

    animation:responsive-shadow-one 0.6s ease-out;

    transform: perspective(1300px) rotateY(10deg) translateZ(215px) scale(0.2);

}

.navbar-container.active .shadow.two{

    animation:responsive-shadow-two 0.6s ease-out;

    transform: perspective(1300px) rotateY(10deg) translateZ(120px) scale(0.2);

}

.corso-button{

    font-size:14px;

    padding:10px 30px;

    background-color:#ff9600;

    border-radius:10px;

    color:white;

    text-align:center;

    transition:0.5s;

}

.corso-button:hover{

    font-size:14px;

    padding:10px 50px;

    background-color:#00a8ff;

    border-radius:10px;

    color:white;

    text-align:center;

    transition:0.5s;

}



}























.corsi-group{

    background-color:white;

    padding:50px 10px;

}

.text-windsurf{

    font-size:35px;

    padding-bottom:20px;

}

.corsi-cards{

    background-color:white;

    padding:50px 10px;

}

.corso-button{

    padding:10px 30px;

    background-color:#ff9600;

    border-radius:10px;

    color:white;

    text-align:center;

    transition:0.5s;

}

.corso-button:hover{

    padding:10px 50px;

    background-color:#00a8ff;

    border-radius:10px;

    color:white;

    text-align:center;

    transition:0.5s;

}