/*RESPONSIVE*/
html {
font-size: 16px;
}
@media screen and (min-width:768px) {
html{
font-size: 18px;
}
}
@media screen and (min-width:1024px) {
html{
font-size: 19px;
}
}
@media screen and (min-width:1280px) {
html{
font-size: 20px;
}
}
/*navbar */
@media screen and (max-width: 980px){
.navbar{
padding: 0;
height: 7vh;
}
.logo_title
{
position: absolute;
font-size: 4vw;
font-weight: bold;
top: 1.8vh;
left: 1.8vw;
}
.nav-links{
position: absolute;
background-color: rgba(0, 0, 0, 0.692);
backdrop-filter: blur(3px);
width: 100%;
height: 100vh;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
margin-top: -400%;
transition: all 0.5s ease;
}
.nav-links.mobile-menu{
margin-top: 0;
}
.nav-links ul{
display: flex;
flex-direction: column;
align-items: center;
}
.navbar a.link_menu_hamb{
display: block;
}
.navbar .menu-hamburger
{
display: block;
}
.navbar .nav-links ul li
{
margin: 25px 0px;
font-size: 6vw;
}
}
/*rest*/
@media all and (max-width: 980px)
{
body
{
background-attachment: scroll;
}
.contenu_div{
display: flex;
flex-direction: column;
}
.first_body
{
display: flex;
flex-direction: column;
}
.banner_text{
font-size: 3vw;
}
.content_button{
margin-top: 5vh;
}
.coach_name{
bottom: -11vh;
}
.card{
width: 80%;
}
.banner_content{
margin-top: 50px;
padding-bottom: 25px;
}
.title_banner{
font-size: 7.5vw;
}
.secondTitle{
font-size: 6vw;
}
.title{
font-size: 5vw;
}
.objectifs{
display: flex;
flex-direction: column;
}
.img_responsive{
display: block;
float: left;
margin: 10px;
}
.expert_tab{
text-align: center;
}
.text.coach{
width: auto;
display: flex;
justify-content: center;
align-items: center;
}
.sportFirst{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 2.5vw;
}
.mosaique{
height: 500px;
}
.img_mosa{
width: 100%;
}
@keyframes imgMosa {
0%{
transform: translateX(0);
}
25%{
transform: translateX(-100%);
}
50%{
transform: translateX(-200%);
}
75%{
transform: translateX(-300%);
}
100%{
transform: translateX(0);
}
}
.container_card
{
display: flex;
flex-direction: column;
}
.arrow_down{
display: block;
}
.arrow{
display: none;
}
.where{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.why_me li , .where li{
list-style-type: circle;
font-size: 3vw;
}
.recoScroll{
overflow-y: scroll;
scrollbar-width: 5px;
width: auto;
height: auto;
padding: 15px;
font-size: 4vw;
}
.fa-star{
padding: 1vw;
}
.content_button.title.tarif{
padding-left: 10px;
padding-right: 10px;
width: 25vw;
}
}