/*@font-face {
    font-family:"Lato";
    src:url(Lato-Regular.ttf);
    font-style:normal;
    font-weight:normal;
}
@font-face {
    font-family:"Lato";
    src:url(Lato-Black.ttf);
    font-style:normal;
    font-weight:normal;
    color:black;
}
@font-face {
    font-family:"Lato";
    src:url(Lato-BlackItalic.ttf);
    font-style:italic;
    font-weight:normal;
    color:black;
}
@font-face {
    font-family:"Lato";
    src:url(Lato-Bold.ttf);
    font-style:normal;
    font-weight:bold;
}
@font-face {
    font-family:"Lato";
    src:url(Lato-BoldItalic.ttf);
    font-style:italic;
    font-weight:bold;
}
@font-face {
    font-family:"Lato";
    src:url(Lato-Italic.ttf);
    font-style:italic;
    font-weight:normal;
}
@font-face {
    font-family:"Lato";
    src:url(Lato-Light.ttf);
    font-style:normal;
    font-weight:300;
}
@font-face {
    font-family:"Lato";
    src:url(Lato-LightItalic.ttf);
    font-style:italic;
    font-weight:300;
}
@font-face {
    font-family:"Lato";
    src:url(Lato-Thin.ttf);
    font-style:normal;
    font-weight:100;
}
@font-face {
    font-family:"Lato";
    src:url(Lato-ThinItalic.ttf);
    font-style:italic;
    font-weight:100;
}*/

/*GENERALITES*/
body {
    font-family:"Lato", sans serif;
    color: #333;
    line-height: 1.6em;
    margin: 0;
    padding:0;
    font-weight:300;
}

/*container*/
.container {
    width:90%;
    max-width:900px;
    margin:0 auto;
}

/*### Titres*/
h1, h2, h3 {
    line-height:1.5em;
}
h1 {
    font-size:3rem;
    color:#40CCEA;
    word-spacing:10px;
    border-bottom: 1px dotted;
    text-align:center;
    margin-left: 5%;
    margin-right: 5%;
}
h2 {
    font-size:1.6rem;
    text-transform: uppercase;
}
h3 {
    font-size:1.4rem;
}

/*### header*/
.header {
    text-align:center;
    margin-bottom:30px;
}
.header nav{
    background-color:#40CCEA;
    padding: 1px 0;
}
.header nav ul {
    display:flex;
    list-style: none;
    text-align:center;
    justify-content:space-around;
}

.header nav li {
    flex-basis:20%;
}

.header nav a {
    color: white;
    padding: 0 3%;
}
.header nav a:hover {
    opacity: 0.8;
}

/*MAIN*/
a {
    text-decoration: none;
    color:#0096D0;
}

section {
    margin: 30px 0;
}

main section .rouge {
    color:#F00;
}
main section .ocre {
    color: #CD8C56;
}

.voyages img {
    max-width:49%;
}
#vienne {
    float:left;
    margin-right: 2%;
}
#marrakech {
    float:right;
    margin-left: 2%;
}
.clear {
    clear:both;
}
.voyages {
    border-bottom: 1px solid black;
    margin-bottom: 25px;
    padding-bottom: 30px;
}
.readmore {
    background-color: #0096D0;
    border-radius:6px;
    padding:0.5em 1em;
    color:white;
}

/*SAISONS*/
table{
    width:100%;
    border-collapse:collapse;
}

th, tr, td {
    border: 1px solid #ccc;
    padding: 1em;
}

tr:nth-child(even) {
    background-color: #eee;
}

/*### Section "À propos"*/
#aPropos {
    background-image:url(fond.jpg);
    background-position:center;
    background-size:cover;
    padding: 3%;
}
#aPropos article {
    background-color: white;
    width:50%;
    padding: 2%;
    box-sizing:border-box;
}

/*### Section "Me contacter"*/
.iconcoor {
    color: #333;
}
.fa-facebook-square {
    color:#4267B2;
}
.fa-twitter-square {
    color:#1da1f2;
}
.fa-pinterest-square {
    color:#bd081c;
}
.fa-instagram-square {
    color:#8948C1;
}
#iconesReseaux {
    display:flex;
    list-style:none;
}
#iconesReseaux li {
    justify-content: space-between;
}
/*FORM*/
form {
    background-color:#444;
    background-image:url(map-image.png);
    background-position:center;
    background-repeat:no-repeat;
    padding:1em;
}
#formflex {
    display:flex;
    justify-content:space-between;
}
.col  {
    flex-basis:48%;
}
#name, #mail, #tel, #message {
    width: 100%;
    display:block;
}
#toolbar {
    text-align:center;
}

/*## Pied de page*/
.footer{
    background-color:#40CCEA;
    text-align:center;
    padding:1% 2%;
    color:white;
}
.footer img {
    width:60px;
}
.footer a {
    color:white;
    text-decoration:underline;
}