html,
body {
    height: 100%;
}
body.accueil {
    background-image: url(../images/background_page1.png);
    margin: 0;
}
body.mentions {
    background-image: url(../images/background_mentions.png);
    margin: 0;
}
header {
	position: fixed;
    top: 0;
    left: 0;
	padding: 0 10px;
	z-index: 10000;
    background-color: #EAA712;
    width: 100%;
}
header > nav.items {
    display: flex;
    justify-content: space-around;
    align-items: right;
}
header > nav.items > a.item {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    text-decoration: none;
	font-family: 'Swis721 Bd BT';
    color: #23354C;
    font-size: 1rem;
	text-transform: uppercase;
}
header > nav.items > a.item:hover {
    color: white;
}
main > .presentation, 
main > .initiations {
    width: 100%;
}

main > .presentation > figure, main > .presentation > article,
main > .initiations > figure, main > .initiations > article,
main > .entrainements > figure, main > .entrainements > article {
    display: table-cell;
    padding: 4rem 1.5rem;
}

main > .presentation > figure,
main > .initiations > figure {
    width: 40%;
}

main > .presentation > figure > img,
main > .initiations > figure > img {
    width: 75%;
    display: block;
    margin: 0 auto;
}

main > .presentation > article,
main > .initiations > article,
main > .entrainements > article,
main > .mentions-legales > article {
    padding-left: 60px;
    padding-right: 60px;
    vertical-align: top;
}

main > .presentation > article > h1 {
    font-family: 'Swis721 BdOul BT';
    color: #EAA712;
    font-size: 6rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

main > .presentation > article > p {
    font-family: 'Swis721 Lt BT';
    color: white;
    font-size: 1.5rem;
    text-align: justify;
}

main > .initiations {
    background-image: url(../images/background_page2.png);
    margin: 0;
    padding: 0;
}

main > .initiations > article > h2,
main > .entrainements > article > h2,
main > .mentions-legales > article > h2 {
    font-family: 'Swis721 Bd BT';
    color: #EAA712;
    font-size: 3rem;
    text-align: center;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

main > .initiations > article > hr,
main > .entrainements > article > hr,
main > .mentions-legales > article > hr {
    border: 0.1rem solid #EAA712;
}

main > .initiations > article > p,
main > .initiations > article > ul {
    font-family: 'Swis721 Lt BT';
    color: white;
    font-size: 1.5rem;
    text-align: justify;
}

main > .initiations > article > ul {
    list-style-image: url(../images/favicon.png);
}

main > .initiations > article > p > a,
main > .initiations > article > ul > li > a,
main > .entrainements > article > p > a {
    font-family: 'Swis721 Lt BT';
    color: #EAA712;
}

main > .entrainements {
    background-image: url(../images/background_page3.png);
    margin: 0;
    padding: 0;
}

main > .entrainements > article > p {
    font-family: 'Swis721 Lt BT';
    color: white;
    font-size: 1.5rem;
    text-align: justify;
}

main > .entrainements > article > p.creneaux {
	width: 60%;
	display: table-cell;
	padding: 5px;	
}

main > .entrainements > article > p > strong {
    font-family: 'Swis721 LtEx BT';
    font-weight: 200;
    font-style: italic;
    color: #EAA712;
}

main > .entrainements > article > p > img {
    width: 25rem;
    display: block;
}

main > .entrainements > figure {
    width: 50%;
}


main > .entrainements > figure > div#map {
    height: 30rem;
}

main > .mentions-legales > article > h3,
main > .mentions-legales > article > p,
main > .mentions-legales > article > p > a {
	font-family: 'Swis721 Lt BT';
    color: white;
    font-size: 1rem;
    text-align: justify;
}

main > .mentions-legales > article > p.back > a {
	font-family: 'Swis721 Lt';
	font-size: 0.9rem;
}

main > .mentions-legales > article > p > strong {
	text-transform: uppercase;
}

main > .mentions-legales > article > h3 {
	text-transform: uppercase;
	font-size: 1.3rem;
	color: #EAA712;
}
	

footer {
    background-color: #EAA712;
    width: 100%;
}

footer > section {
    display: table-cell;
    padding: 0.5rem 1.5rem;
    width: 25%;
}

footer > section > h4 {
    font-family: 'Swis721 Bd BT';
    color: #23354C;
    font-size: 1rem;
    text-align: center;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

footer > section > hr {
    border: 0.1rem solid #23354C;
}

footer > section > p,
footer > section > p > a,
footer > section > a {
    font-family: 'Swis721 Lt BT';
    color: white;
    font-size: 1rem;
    text-align: justify;
    text-decoration: none;
}

footer > section > figure > img {
    width: 60%;
    display: block;
    margin: 0 auto;
}

div.referencements {
    background-color: #EAA712;
    color: white;
    text-align: center;
    font-family: 'Swis721 Lt BT';
    font-size: 0.7rem;
    padding-bottom: 5px;
}

div.referencements > a {
    color: white;
    text-decoration: none;
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (max-width: 1024px) {
    body {
        background-position-x: center;
    }

    main > .presentation > figure, main > .presentation > article,
    main > .initiations > figure, main > .initiations > article,
    main > .entrainements > figure, main > .entrainements > article,
	main > .mentions-legales > article	{
        display: block;
        padding: 1.5rem;
    }

    main > .presentation > figure,
    main > .initiations > figure,
    main > .entrainements > figure {
        width: 75%;
        margin-bottom: 0;
        margin-top: 0;
    }

    main > .presentation > figure > img {
        width: 45%;
        display: block;
        margin: 0 auto;
    }

    main > .presentation > article > h1 {
        margin-top: 0;
        font-size: 4rem;
    }

    main > .initiations {
        background-position-x: left;
    }
    
    main > .initiations > figure > img {
        width: 65%;
        display: block;
        margin: 0 auto;
    }

    main > .entrainements {
        background-position-x: 60%;
    }

    main > .initiations > article > h2,
    main > .entrainements > article > h2 {
        font-size: 2rem;
    }

    main > .entrainements > article > h2 {
        margin-top: 0;
    }

    main > .entrainements > figure > div#map {
        height: 15rem;
    }

    main > .entrainements > article > p > img {
        width: 15rem;
        display: block;
    }

    footer > section {
        display: block;
        padding: 0.5rem 1.5rem;
        width: auto;
    }
}