/* DOCUMENT INFORMATION
    - Document : Ma Décennie à vélo
    - Version : 1.0.0
    - Author : S.Rahari
*/

/* COLORS
    - defaut body text
    -h1
    -h2
    -h3
    -h4
    

    -button {
        border: none;
        border: radius 10px;
        background-color: #FFF
        font-family : Lato

    -button:hover

    -border
*/

/* FONTS
    - default
    - subtitle
    - Roboto, Lato
    - Quicksand

*/

/* CSS DIRECTORY
1.=GLOBAL
2.=HEADER
3.=BODY

*/

/*GLOBAL
=============================================================*/
html {
    background-color: #fff;
}

h1 { font-family: 'Roboto', sans-serif;
    font-size: 10px;}

h3 {font-family: 'Roboto', sans-serif;
    font-size:30px;}

p{font-family: 'Quicksand', sans-serif;
    font-size:16px;
    }

.chapeau {font-family: 'Roboto', sans-serif;
    font-size:35px;}

a,button:hover {
cursor: pointer;
}

/*HEADER
===============================================================*/
/*--------------------RESET START----------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ------------------------------RESET END -------------------------------------------*/

/* ===========================DESKTOP =================================================*/

/*--------------------THIS FOR NAV BAR--------------------------------------------*/

nav{
    background-color:white;
   width: 100%;  
   /* max-height:20px; */
    /* overflow:hidden visible; */
  /* height:10%; */
    display:flex;
    
}

/* nav:hover
{
	max-height:100%;
    overflow:auto;
} */

.logo-header{ 
    width : auto;
     margin-left:9.01%;} /*173px*/

/* .logo-header { 
    /* width : 55.31%; 1062px */
    /* width: 100%; 1920px; }*/
  
/* .logo-mdav {
    width: 300px;
    height: 100px;
    

    } */

.social-media{
    /* margin-left:50%; */
    padding-left : 50%;
} 

.cta-navbar {
    /* margin-right : 0%; */
    margin-left : 5em;
    margin-top: 3.5em;
    border: none;
    border-radius: 0.7em;
    background-color: #57555581;
    /* opacity: 0.7; */
    color: #272629;
    padding:1em 1em;
    text-align: center;
    text-transform:uppercase;
    font-size: 0.8em;

}
.social-media img{
    width:2.5em;
    height:auto;
    margin-left: 1em;
    margin-top: 2.8em;
    -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;   
}


/*-----------------------THIS FOR HERO----------------------------------------------------------*/


main{
    background-image:url(ressources/velo-ville-femme.png);
    background-attachment: fixed ;
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 1em;
    display: flex;
    flex-direction: column; 
    justify-content: center;
   
}



h1 { font-family: 'Roboto', sans-serif;
    font-size:4em;
    color: #FFF;
   padding: 0 0 0.2em 0.5em;
   /* line-height: 1; */
}

h3 {font-family: 'Roboto', sans-serif;
    font-size:2em;
    color: #FFF;
    padding: 0 0 0.2em 1em;
 }


.cta-header {
    margin-top: 1em;
    margin-left:2em;
    border: none;
    border-radius: 0.7em;
    background-color: #fff;
    /* opacity: 0.7; */
    color: #1D1739;
    padding: 2em 2em;
    text-align: center;
    text-transform:uppercase;
    font-size: 1em;
    font-family: 'Roboto', sans-serif; 
}

/*-----------------------THIS FOR BODY----------------------------------------------------------*/
/* body {
width :1920px;
display: block;
justify-content: center;
} */

.chapeau {
    background-color: rgba(27, 23, 57, 0.4);
    text-align: center;
    color:#7C788F;
    opacity:1;
    padding:1rem;
    width: 100%;
    }
    
section {
    
    background-color:#F0EEFA;
    width:85.62%;
    height: auto;
    display: flex;
    /* margin-left: 0;*/
    align-items: center;
}

section div{
    width: 35%;    
    /* padding-left: 20%; */
}

#ecology {
    justify-content:space-between;
    margin:6.92% auto 11.56% ;
}
#ecology div:last-child {
    margin: auto;
}

#sport {
    justify-content:space-between;
    margin:6.92% auto 11.56%; }

/* #sport img {
    float: right;
  } */

#sport div:first-child {
    margin: auto;}


#economy {
    justify-content:space-between;
    margin: 6.92% auto 11.56%;
}
#economy div:last-child {
    margin: auto;
}


section p {
    font-size:1em;
    line-height:1.5;
    color :#1D1739;
    font-family: 'Quicksand',sans-serif;
    padding-left: 2em;
}

section h3 {
    color :#1D1739;
    font-family: 'Roboto', sans-serif;
}

article {
    background-color:#F0EEFA;
    width:100%;
    height: 50vh;
    display:flex;
    flex-direction: column;
    align-items: center;
    margin-top : 11.61%;
    padding-top: 5em;
    line-height: 2;
    
}

article h3 {
    color :#1D1739;
    font-family: 'Roboto', sans-serif;
}
article p {
    font-size:1em;
    color :#1D1739;
    font-family: 'Quicksand',sans-serif;
}

.cta-footer {
    margin-top: 8%;
    border: none;
    border-radius: 0.7em;
    background-color:#1D1739;
    width:15rem;
    color: #FFF;
    padding: 1em 1.5em;
    text-align: center;
    text-transform:uppercase;
    font-size: 1rem;
    font-family: 'Roboto', sans-serif;  }

/*-----------------------THIS FOR FOOTER---------------------------------------------------------*/

footer {
    width: 100%;
    height: auto;
    background-color:#1D1739 ;
    display: flex;
    justify-content: space-between;
    
   }

.intro {
   padding-left: 5%;
   padding-top: 2%;
    line-height: 1.5em; 
    
}
.intro img {
    max-width: 30%;
    height: auto;
    }

footer p,a {
    font-family: 'Quicksand',sans-serif;
    color:white;
    font-size: 0.8em;
    }

.logo-footer {
    display: flex; 
    justify-content:center ;
    /* margin-left: 5.5%; */
    /* align-items:flex-start; */

     }

.logo-footer img {
    margin-top: 8%;
    width: 11rem;
    height: auto;
}

 .logo-footer p{ 
    margin-left: 90%;
    margin-top: -40%; 
}

 .logo-paris {
    padding-right: 30%; 
    padding-left: 30%;
}

.logo-lille {
    padding-right: 30%; 
} 
/* .logo-nantes {
    /* margin-right: 30%;  */


.legal {
     margin-top: 6.5%; 
     margin-right: 10%;

} 


/* ===========================RESPONSIVE DESKTOP <1200px =================================================*/
@media screen and (max-width:1200px) {
    main h1 {font-size: 4em;}
    main h3 {font-size:2em}
.logo-header{ 
    width : auto;
   margin: 0 auto;}
   .social-media{display: none;}
   .cta-navbar{display: none;}
   main{
       max-width: 100%;
       max-height: 50vh;
       text-align: center;
   }
   .chapeau {
       width: 100%;
       font-size: 2em;
       }   
   section {
       background-color:white;
       padding-top: 2em;
       width: 100;
       display:flex;
       flex-direction: column;
       text-align: center;  
   }
   section div {
   width: 60%;
   padding-top: 2%;
   padding-bottom: 2%;
   }
   #sport {flex-direction: column-reverse;}

footer {
    flex-direction: column;
}

.intro{
    margin-left: 0;
    text-align: center;}

.intro p br {display:none;}

.intro img{
    position: absolute;
    margin-top: 5em;
    margin-left: -5%;
    max-width : 10%; 
}
.logo-footer p{ 
    margin-left: 90%;}

.logo-footer img {
  max-width:10em;}

.legal {
   position: relative;
   text-align: right;
   font-size: 0.8em;
}

.logo-paris {
    padding-right: 2em;
    padding-left:0%; 
   
}
.logo-lille {padding-right: 1em;}

}

/* ===========================RESPONSIVE TABLET <736px =================================================*/

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

    main h1 {font-size: 2em;}
    main h3 {font-size:1em}
    .cta-header{padding: 1em 2em;
    font-size:1em;}
    .chapeau {font-size:1em;}
    section {font-size: 0.7em;}
    article {text-align:center;line-height:2em;}
    footer {font-size: 0.6em;}
    .logo-footer {margin:0 auto;}
    .logo-footer p{ 
        margin-left: 90%;}
    }

/* ======================RESPONSIVE SMARTPHONE <414px============== */
@media screen and (max-width:414px) {

    main h1 {font-size: 2em;}
    main h3 {font-size:1em}
    .cta-header{padding: 1em 2em;}
    .chapeau {font-size:1.5em;}
    section {font-size: 0.7em;}
    section img {
        max-width: 98%;
        border-radius: 5%;
    }
    article {text-align:center;line-height:2em;}
    footer {font-size: 0.6em;}
    .logo-footer {margin:0 auto;}
    
    .logo-footer p{ 
        margin-left: 90%;}
    }

    /* ===========================RESPONSIVE DESKTOP 2 <1200-1500px =================================================*/
    @media screen and (min-width:1203px) and (max-width:1500px) {
    .social-media{padding-left : 35%;
        } 
    .intro{
            margin-left: 0;}
    
     .legal {
                
                text-align: right;
                font-size: 0.8em; 
             }
             
    .logo-paris {
                 padding-right: 2em;
                 padding-left:0%; 
                
             }
     .logo-lille {padding-right: 1em;}
    
    }