@import url('fonts/MarkerFeltWide-PlainRegular.css');
@import url('fonts/Pacifico-Regular.css');
@import url('fonts/DINOT-CondBold.css');
@import url('fonts/DINOT-CondMedium.css');
@import url('fonts/DINOT-Medium.css');
@import url('fonts/DINOT-Regular.css');

*{
    margin: 0;
    font-family: 'DINOT-CondMedium';
}
ul{
    list-style-type: none;
    padding: 1em;
}
li{
    color:cornsilk;   
}
a{
    text-decoration: none;
    color: white;
}
h1{
    color: #018995;
    font-size: 1.5em;
}
body{
    background-image: url('../img/bg-champs2.jpg');
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top;
}
#wrapper {
    text-align: center;
    font-family: 'DINOT-CondMedium';
    color:#035c62;
    min-height:100vh; /* 1 */
    display:flex; /* 2 */
    flex-direction:column; /* 3 */
}

/************************/
/*        HEADER        */
/************************/
header{
    /*background-color: rgba(255, 255, 255, 0.3);*/
    padding: 1em;
}
header .logo{
    text-align: center;
}
header .logo img{
    width: 125px;
    opacity: 1;
}

/************************/
/*         MAIN         */
/************************/

main{
    flex-grow:1;
    display: flex;
    justify-content: center;
    align-items: center;
}
#presentation{
    text-align: center;
    font-size: 1.5em;
    color: #fff;
    padding: 5px;
    text-shadow: 1px 2px 3px #fff;
}
/* SVG */
svg{
    width: 800px;
}
/* Map pin */
.pin{
    fill:#99d4d5;
    stroke: #fff;
}
/* Départements */
.dpt{
    fill:rgba(224, 224, 224, 0.8);
    transition: 0.5s ease;
}
.dpt:hover{
    fill: rgba(0, 149, 151, 0.8);
    transition: 0.5s ease;
}
#svg-wrapper{

}

/************************/
/*        FOOTER        */
/************************/  

small ul{
    color:#fff;
    text-align: center;
    /*background-color: rgba(21, 21, 21, 0.4);*/
}
small p{    
    padding: 25px;
}

/********************************************* RESPONSIVE **************************/ 

/*@media screen and (max-width: 1440px) {
}
     
@media screen and (max-width: 1280px) {
    }*/

/*@media screen and (min-width: 960px) {
    #presentation{
    text-align: center;
    font-size: 1.2em;
    color: #fff;
    padding: 5px; 
    
    /*text-shadow: 1px 2px 3px #666;*/

    @media (max-width: 1024px) {

        svg{
            width: 100%;
            max-width: 700px;
            top:0;
            bottom:0;
        }      
    }
    @media (max-width: 480px) {
        #presentation{
            margin-bottom: 10%;
        }        
    }