@font-face {
    font-family: 'coconbold';
    src: url('ufonts.com_cocon-bold-opentype-webfont.eot');
    src: url('ufonts.com_cocon-bold-opentype-webfont.eot?#iefix') format('embedded-opentype'),
         url('ufonts.com_cocon-bold-opentype-webfont.woff2') format('woff2'),
         url('ufonts.com_cocon-bold-opentype-webfont.woff') format('woff'),
         url('ufonts.com_cocon-bold-opentype-webfont.ttf') format('truetype'),
         url('ufonts.com_cocon-bold-opentype-webfont.svg#coconbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    max-height: 100%;
}



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

    main{
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
    }
    
    main .carte {
        display: none;
    }
    
    main .infos {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;
    }

    main .infos .map {
        opacity: 0;
        display: none;
        position: relative;
        float: left;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }

    main .infos select option.map{
        display: block;
    }

    main .infos .map.active {
        opacity: 1;
        display: block;
        width: 100%;
        background: #fff;
        border: 1px solid #dadada;
        padding: 0 25px;
        box-sizing: border-box;
    }

    main .infos .map.active p.duree_ville{
        border-bottom: 1px solid #dadada;
        padding-bottom: 10px;
    }
    
    main .infos .map.active p.duree_ville:last-of-type {
        border: 0 none;
    }

    main .infos .map.active img{
        max-width: 100%;
        margin-bottom: 20px;
    }

     main .infos .map h2{
        font-family: 'coconbold', sans-serif;
        color: #318DDB
    }

    main .infos .map.active .close{
        display: none;
    }


    select{
        width: 100%;
        font-size: 15px;
        text-transform: uppercase;
        font-family: 'Roboto', sans-serif;
        font-weight: 800;
        padding: 20px 15px;
        color: #318DDB;
        letter-spacing: 2px;
        float: left;
        position: relative;
        display: block;
    }    

    select .map{
      padding: 15px 0;
      font-size: 18px;
    }


} /* max-width 640px, mobile-only styles, use when QAing mobile issues */



// XLarge screens
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 776px){
    
    select#select{
        display: none;
    }

    main {   
        width: 100%;
        font-family: 'Roboto', sans-serif;
        /* overflow: hidden; */
    }

    main .carte{
        width: 373px;
        height: 522px;
        float: left;
    }

    main.ouvrages .carte{
        width: 490px;
    }

    main.contact .carte {
        background: url(../img/carte-contact-sdea.png) no-repeat left top;
    }

    main.ouvrages .carte {
        background: url(../img/carte-ouvrages-sdea.png) no-repeat left top;
    }

    main.travaux .carte {
        background: url(../img/info-travaux-sdea.png) no-repeat left top;
    }

    main .infos .map {
        opacity: 0;
        -webkit-transition: opacity .3s ease-in-out;
        -moz-transition: opacity .3s ease-in-out;
        -ms-transition: opacity .3s ease-in-out;
        -o-transition: opacity .3s ease-in-out;
        transition: opacity .3s ease-in-out;
        padding: 0 40px 0 25px;
        box-sizing: border-box;
        display: none;
    }

    main .infos select option.map{
        display: block;
    }

    main .infos .map.active {
        opacity: 1;
        width: 348px;
        max-height: 490px;
        overflow-y: scroll;
        background: #fff;
        border: 1px solid #dadada;
        display: block;
        top: 10px;
        position: absolute;
    }

    main.ouvrages .infos .map.active{
        max-width: 250px;
    }

    main .infos .map.active p.duree_ville{
        border-bottom: 1px solid #dadada; 
        padding-bottom: 10px;
    }
    
    main .infos .map.active p.duree_ville:last-of-type {
        border: 0 none;
    }

    main .infos .map.active img{
        max-width: 348px;
        margin-bottom: 20px;
    }

     main.ouvrages .infos .map.active img{
        max-width: 250px;
        margin-bottom: 20px;
    }

    main .carte .map {
        width: 14px;
        height: 14px;
        position: absolute;
        z-index: 99;
        cursor: pointer;
    }

    main .carte .map.active, main .carte .map:hover {
        width: 9px;
        height: 9px;
        border: 3px solid black;
        border-radius: 9px;
        background: white;
        display: block;
    }

    main .infos .map h2{
        font-family: 'coconbold', sans-serif;
        color: #318DDB
    }

    main .infos .map.active .close{
        font-family: 'FontAwesome';
        display: block;
        width: 14px;
        height: 14px;
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }

main .infos {
    overflow: hidden;
    height: 522px;
    width: 348px;
    position: relative;
    float: left;
}


} /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */