/* All what we don't need. */


/*-----------------------------------*/

.navbar-brand.navbar-logo,
#alert_all_pages_bloc,
#report_bug_bloc,
.page-header,
#sdjc_links,
#footer {
    display: none;
}


/* VPCMS modifications */


/*-----------------------------------*/

html {
    overflow-y: hidden;
}

.wrapper {
    overflow: hidden;
}

#main {
    position: relative;
    height: 100%;
}


/* size given by js */

#main_navbar {
    z-index: 10;
    top: 0px;
    position: absolute;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    display: none;
}

button.navbar-toggle {
    display: none;
}

#content,
.page-content {
    height: 100%;
}

.page-content .container:first-child {
    padding: 0px;
    margin: 0px;
}


/* KEYFRAME */


/*-----------------------------------*/


/* FLASH KEYFRAMES */


/* usage : 
-webkit-animation: flashBg linear 0.2s;
animation: flashBg linear 0.2s;
*/


/*-----------------------------------*/

@-webkit-keyframes flashColor {
    50% {
        color: #FFF;
    }
}

@keyframes flashColor {
    50% {
        color: #FFF;
    }
}

@-webkit-keyframes flashBg {
    50% {
        background: #FFF;
    }
}

@keyframes flashBg {
    50% {
        background: #FFF;
    }
}


/* The btn_show_menu (for main_navbar) */


/*-----------------------------------*/

#btn_show_menu {
    right: 10px;
    z-index: 20;
    line-height: 1.7em;
    position: absolute;
    top: 10px;
}


/* Map things */


/*-----------------------------------*/

#map {
    z-index: 2;
}


/* ico_btn */


/*-----------------------------------*/

.ico_btn {
    cursor: pointer;
    text-align: center;
    color: #FFF;
    width: 50px;
    height: 50px;
    font-size: xx-large;
    line-height: 1.55em;
}

.ico_btn.small {
    width: 30px;
    height: 30px;
    font-size: large;
    line-height: 1.75em;
}

.ico_btn.big {
    width: 70px;
    height: 70px;
    line-height: 2.05em;
    font-size: 2.2em;
}

.ico_btn.very_big {
    width: 100px;
    height: 100px;
    line-height: 1.85em;
    font-size: 3.9em;
}

.ico_btn:hover,
button:hover {
    -webkit-animation: flashColor linear 0.2s;
    animation: flashColor linear 0.2s;
    -webkit-animation: flashBg linear 0.2s;
    animation: flashBg linear 0.2s;
    color: #FFF;
}

.ico_btn.active {
    background: #00B8F2;
}

.ico_btn.disabled {
    opacity: 0.6;
}

.ico_btn.btn_dark {
    background: #000;
    border: solid 1px #FFF;
}

.ico_btn.btn_danger {
    color: #DC3545;
    border: solid 1px #DC3545 !important;
}

.ico_btn.dev_btn {
    background: #CCC !important;
}

.ico_btn.dev_btn.active {
    background: #f0ad4e !important;
}


/* button_on_map */

.ico_btn_on_map {
    position: absolute;
    z-index: 10;
    background: #3b8de1;
}


/* */

.ico_btn_on_map.disabled {
    opacity: 0.4;
}


/* ico_svg */


/*-----------------------------------*/

.ico_btn_svg {
    border-radius: 50%;
    background: #3b8de1;
    text-align: center;
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-content: center;
}

.ico_btn_svg img {
    width: 60%;
}

.ico_btn_text {
    border-radius: 50%;
    width: 65px;
    height: 65px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.ico_btn_svg:hover,
.ico_btn_text:hover {
    -webkit-animation: flashBg linear 0.2s;
    animation: flashBg linear 0.2s;
}

.ico_btn_text div {
    font-size: 3em;
    line-height: 1.5em;
}

.ico_btn_text i {
    font-size: 2em;
    line-height: 1.6em;
}

.ico_btn_transp {
    border: solid 1px rgba(200, 200, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
}


/* ico_btn btn_rnd */


/*-----------------------------------*/

.btn_rnd {
    border-radius: 50%;
}

.btn_square {
    border-radius: 2px;
}

.ico_mobile.btn_dev {
    border: solid 1px #ccc;
    color: #ccc;
    background: none;
}


/* markers */


/*-----------------------------------*/

.markerOnMap.circle-dot {
    border-radius: 50%;
}


/* MAP_MENU */


/*-----------------------------------*/

#map_menu {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 500;
    width: 100%;
    height: auto;
    background: #FFF;
    padding: 20px 10%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}

.ico_btn_in_map_menu {
    font-size: 3em;
}


/* ICO MOBILE */


/*-----------------------------------*/

.ico_mobile {
    width: 66px;
    height: 66px;
    position: relative;
    line-height: 1.75em;
    vertical-align: middle;
    margin: 5px;
    border-radius: 20%;
    background-image: linear-gradient(to bottom, #3b8de1, #00a7ee, #00bee8, #00d2d4, #00e2b6);
    color: #FFF;
    text-align: center;
    font-size: 2.7em;
}


/* buttons on map */


/*-----------------------------------*/

#btn_follow_gps {
    bottom: 340px;
    right: 10px;
}

#btn_zoom_in {
    bottom: 280px;
    right: 10px;
}

#btn_zoom_out {
    bottom: 220px;
    right: 10px;
}

#btn_recenter_map {
    bottom: 160px;
    right: 10px;
}


/* The COG, displayer of the button on map */

#btn_display_map_menu {
    bottom: 20px;
    left: calc(50% - 25px);
}


/* btn popup back */


/*-----------------------------------*/

.btnPopupBack {
    position: fixed;
    bottom: 20px;
    left: calc(50% - 25px);
    line-height: 1.45em;
}

.btnPopupBack.small {
    line-height: 1.55em;
}

.btnPopupBack.right {
    left: auto;
    right: 24px;
}


/* marker popup */


/*-----------------------------------*/

.leafletPopupSpotMainBloc {
    font-size: 1.4em;
}

.leafletPopupSpotCity {
    font-weight: 600;
}

.leafletPopupSpotPlace {
    font-weight: 200;
}

.leafletPopupSpotDistance {
    color: #999;
}


/* leaftlet derogation */


/*-----------------------------------*/

.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
    font-size: 9px;
}


/* popups */


/*-----------------------------------*/


/* Popup on map (So not in dock) */


/*-----------------------------------*/

.popup_on_map {
    position: absolute;
    top: 150px;
    width: 90%;
    margin-left: 5%;
    padding: 15px;
    font-size: 1.1em;
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    z-index: 1000;
    /*-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);*/
}

#popup_transparent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0px;
    background: none;
}

#popup_transparent .popup_content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.popup_on_map.draggable {
    cursor: move;
}

.popup_on_map h3 {
    padding: 1px 5px;
    font-weight: bold;
    color: #FFF;
    margin: 30px 0px;
    text-align: center;
}

.popup_full_width {
    left: 0px;
    margin-left: 0px;
    width: 100%;
    border-radius: 0px;
}

.popup_full_width .popup_content {
    width: 90%;
    float: left;
    overflow-y: auto;
}

.btnPopupClose {
    color: #000;
}


/* spots list */


/*-----------------------------------*/

#popup_spots_list .popup_content {
    width: 100%;
    overflow-y: scroll;
    height: 100%;
}

.spot_list_date_separator {
    font-weight: 600;
    margin-top: 20px;
}

.spot_list_item {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.spot_list_item .ico_spot_bloc {
    width: 35px;
    height: 45px;
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
}

.spot_list_item .ico_spot_bloc .awesome-marker {
    position: relative;
}

.spot_list_item .details {
    display: inline-block;
}

.spot_list_item .spot_city {
    font-weight: 600;
    color: #333;
}

.spot_list_item .spot_place {
    font-weight: 200;
    color: #666;
}

.spot_list_item .img_container{
    width: 100px;
    height: 60px;
}

#spots_stats {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: #FFF;
    background: #3B8DDF;
}

#spots_stats .num {
    font-size: 2em;
    font-weight: 600;
}

#spots_stats .text {
    font-weight: 200;
}


/*#########################################
#         MAP CSS
#########################################*/


/* spot */


/*-----------------------------------*/

.popupSpotMainBloc img {
    max-width: 100%;
}


/*#########################################
#         SPOTS
#########################################*/

.spot_card {
    position: relative;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    width: 150px;
    margin: 10px;
    /* border-radius: 8px; */
    height: 200px;
    background: rgb(255, 255, 255);
    background: linear-gradient(284deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border: solid 1px #DDD;
}

.img_container {
    width: 150px;
    height: 90px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    filter: saturate(110%) contrast(110%) brightness(110%) sepia(0%);
    box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
    margin-top: 6px;
    border-top: solid 1px #DDD;
    border-bottom: solid 1px #FFF;
}


/*.img_container img{
    width:150px; 
    min-height: 90px;
    filter : saturate(110%) contrast(110%) brightness(110%) sepia(0%);
    -webkit-transform: scale(1);
    transform: scale(1);

    mix-blend-mode: multiply;

    
}*/

.spot_card .dep_name {
    font-family: 'Montserrat', sans-serif;
    color: #222;
    font-size: 12px;
    position: absolute;
    height: 15px;
    top: 90px;
    right: 0px;
    width: 100%;
    padding: 0 4px;
    border-bottom: solid 1px #EEE;
    text-align: right;
    mix-blend-mode: multiply;
}

.spot_card .categorie {
    position: absolute;
    height: 10px;
    width: 10px;
    top: 90px;
    left: 0px;
    margin: 2px;
    border-radius: 50%;
    /*mix-blend-mode: multiply;*/
}

.spot_card .categorie.R {
    background: #3D70C9;
}

.spot_card .categorie.M {
    background: #FF6666;
}

.spot_card .categorie.C {
    background: #FFE98D;
}

.spot_card .categorie.N {
    background: #799D1C;
}

.spot_card .text {
    position: absolute;
    top: 105px;
    height: 95px;
    width: calc(100% - 20px);
    padding: 0px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* TALL VERSION */

.spot_card.tall {
    width: 150px;
    height: 230px;
}

.spot_card.tall .text {
    top: 135px;
    height: 95px;
    width: 100%;
}

.spot_card.tall .dep_name {
    top: 120px;
}

.spot_card.tall .categorie {
    top: 120px;
}

.spot_card.tall .img_container {
    width: 150px;
    height: 110px;
}

.spot_card.tall .img_container img {
    min-height: 120px;
}


/* text details */

.spot_card .text .place {
    font-family: 'Montserrat', sans-serif;
    color: #333;
    line-height: 1em;
    font-size: 15px;
}

.spot_card .text .city {
    font-family: 'Oswald', sans-serif;
    color: #AAA;
    font-size: 15px;
    line-height: 1em;
    margin-top: 4px;
}

.spot_card .menu {
    position: absolute;
    top: 73px;
    color: #F00;
}

.spot_card .menu .btn {
    cursor: pointer;
}

.spot_card .menu .btn:hover {
    color: #FF0;
}


/* dep */

.dep_01 {
    background: #d2f9f1;
}

.dep_02 {
    background: #c2dcdc;
}

.dep_03 {
    background: #fdc2f1;
}

.dep_04 {
    background: #c8bef3;
}

.dep_05 {
    background: #d0c4e3;
}

.dep_06 {
    background: #fed0c3;
}

.dep_07 {
    background: #cfcde2;
}

.dep_08 {
    background: #bde4e7;
}

.dep_09 {
    background: #bdefd2;
}

.dep_10 {
    background: #e9f4e3;
}

.dep_11 {
    background: #cbbcde;
}

.dep_12 {
    background: #fff6b9;
}

.dep_13 {
    background: #cce3b5;
}

.dep_14 {
    background: #d1e8e8;
}

.dep_15 {
    background: #ffe3fa;
}

.dep_16 {
    background: #c5f2c8;
}

.dep_17 {
    background: #cacbd8;
}

.dep_18 {
    background: #b7daef;
}

.dep_19 {
    background: #fce9f6;
}

.dep_20 {
    background: #ffc3e0;
}

.dep_21 {
    background: #fcf9e9;
}

.dep_22 {
    background: #c0e2ec;
}

.dep_23 {
    background: #dce1c4;
}

.dep_24 {
    background: #b9d4cd;
}

.dep_25 {
    background: #edd4fa;
}

.dep_26 {
    background: #ccffec;
}

.dep_27 {
    background: #f1b9b9;
}

.dep_28 {
    background: #c1c7fc;
}

.dep_29 {
    background: #e7c9d5;
}

.dep_30 {
    background: #f8b4d9;
}

.dep_31 {
    background: #ceb5c2;
}

.dep_32 {
    background: #f8ceba;
}

.dep_33 {
    background: #e2cbf9;
}

.dep_34 {
    background: #c0c0c6;
}

.dep_35 {
    background: #c5f4de;
}

.dep_36 {
    background: #e7c8f4;
}

.dep_37 {
    background: #bbd9b6;
}

.dep_38 {
    background: #eefbe4;
}

.dep_39 {
    background: #f4e7da;
}

.dep_40 {
    background: #faecd4;
}

.dep_41 {
    background: #b9f7fb;
}

.dep_42 {
    background: #e6d6bb;
}

.dep_43 {
    background: #f7cdf7;
}

.dep_44 {
    background: #eac7e1;
}

.dep_45 {
    background: #e8fece;
}

.dep_46 {
    background: #bcfffe;
}

.dep_47 {
    background: #bec7bc;
}

.dep_48 {
    background: #f3d9ca;
}

.dep_49 {
    background: #d1c6d6;
}

.dep_50 {
    background: #d0f5b7;
}

.dep_51 {
    background: #d9bed4;
}

.dep_52 {
    background: #dff3f6;
}

.dep_53 {
    background: #feb9e5;
}

.dep_54 {
    background: #ddfddf;
}

.dep_55 {
    background: #bcf4b8;
}

.dep_56 {
    background: #caf1c4;
}

.dep_57 {
    background: #ecdcd6;
}

.dep_58 {
    background: #cfc8c4;
}

.dep_59 {
    background: #c0edf1;
}

.dep_60 {
    background: #ffb9d9;
}

.dep_61 {
    background: #e3d9d3;
}

.dep_62 {
    background: #ebfdee;
}

.dep_63 {
    background: #e7c8e7;
}

.dep_64 {
    background: #e8eff1;
}

.dep_65 {
    background: #c6ceff;
}

.dep_66 {
    background: #c8f0c8;
}

.dep_67 {
    background: #b5e3d0;
}

.dep_68 {
    background: #f8d4db;
}

.dep_69 {
    background: #bdc9f8;
}

.dep_70 {
    background: #d7fdc3;
}

.dep_71 {
    background: #ffe2e5;
}

.dep_72 {
    background: #e1d6f6;
}

.dep_73 {
    background: #caf6e1;
}

.dep_74 {
    background: #d3d4d6;
}

.dep_75 {
    background: #d6dbbd;
}

.dep_76 {
    background: #c2d5f7;
}

.dep_77 {
    background: #c4b6e0;
}

.dep_78 {
    background: #fccee6;
}

.dep_79 {
    background: #f9bab9;
}

.dep_80 {
    background: #dcd9c6;
}

.dep_81 {
    background: #dacbe6;
}

.dep_82 {
    background: #b7d1ec;
}

.dep_83 {
    background: #e1fefb;
}

.dep_84 {
    background: #dcfcf3;
}

.dep_85 {
    background: #d9f6ef;
}

.dep_86 {
    background: #f8e2dd;
}

.dep_87 {
    background: #beb4be;
}

.dep_88 {
    background: #b7dfd2;
}

.dep_89 {
    background: #f9b8d1;
}

.dep_90 {
    background: #e4f0fd;
}

.dep_91 {
    background: #d1ccbc;
}

.dep_92 {
    background: #b4f2bd;
}

.dep_93 {
    background: #dbb7f7;
}

.dep_94 {
    background: #e9d8cb;
}

.dep_95 {
    background: #ffb9e3;
}

.dep_96 {
    background: #fcc3f9;
}

.dep_97 {
    background: #e8bde3;
}

.dep_98 {
    background: #c1ffee;
}

.dep_99 {
    background: #d8ebe4;
}

.dep_100 {
    background: #fbd4ce;
}

.dep_101 {
    background: #caf9d2;
}

.dep_102 {
    background: #f8cbf1;
}

.dep_103 {
    background: #f9d2b7;
}

.dep_104 {
    background: #f0d2ef;
}

.dep_105 {
    background: #d0caf3;
}

.dep_106 {
    background: #dde4c4;
}

.dep_107 {
    background: #dcc6f5;
}

.dep_108 {
    background: #d0cddd;
}

.dep_109 {
    background: #fdbcde;
}



/*#########################################
#         CAMERA
#########################################*/


#popup_camera {
    background: none;
    width:100%; 
    height: 100%; 
    position: absolute;
    top:0px;
    left:0px;
    margin:0px;
    padding:0px;

}

#popup_camera .popup_content{
    height: 100%;
}

#iframe_camera{ width:100%; height: 100%; border:none;}


/*#########################################
#         Animations
#########################################*/
.spaceInUp {
  -webkit-animation-name: spaceInUp;
  animation-name: spaceInUp;
  animation-duration: 1s; }

@-webkit-keyframes spaceInUp {
  0% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: scale(0.2) translate(0%, -200%); }
  100% {
    opacity: 1;
    transform-origin: 50% 0%;
    transform: scale(1) translate(0%, 0%); } 
}

@keyframes spaceInUp {
  0% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: scale(0.2) translate(0%, -200%); }
  100% {
    opacity: 1;
    transform-origin: 50% 0%;
    transform: scale(1) translate(0%, 0%); } 
}