/* 
Theme Name:		 OCI
Theme URI:		 https://www.oci.fr/
Description:	 Thème enfant de Hello Elementor, créé par OCI
Author:			 OCI
Author URI:		 https://www.oci.fr/
Template:		 hello-elementor
Version:		 2.0.0
Text Domain:	 OCI
*/

body, html{
	overflow-x:hidden;
}


.elementor-image-carousel-wrapper[aria-label="Accueil"] img {
    height: 100px;
    width: 150px;
    object-fit: contain;
}


/* Petit menu au scroll */

#menubase.headerhide{
	display:none;
}

#menuhopin.headershow{
	transform: translateY(0);
}

#menuhopin{
	position: fixed;
	top:0;
	width: 100%;
	-webkit-transition: transform 0.34s ease;
	transition : transform 0.34s ease;
	transform: translateY(-135px); /*adjust this value to the height of your header*/
}

/* menu scroll*/


.elementor-nav-menu__container{
top:0px!important;
}
#menuhopin.headershow{
transform: none;
}
#menuhopin{
position: fixed;
top:0;
width: 100%;
-webkit-transition: transform 0.15s ease;
transition : transform 0.15s ease;
transform: translateY(-155px); /*adjust this value to the height of your header*/
}


/*:::::::::::::::::::::: RESPONSIVE ::::::::::::::::::::::*/

@media screen and (max-width: 1024px) { 
  div#wpadminbar {
      display: none;
  }
  html[lang] {
    /* padding-top: 0px !important; */
    margin-top: 0px !important;
}
}



/* CARTES */

/* Structure principale */
#wrapper_grey {background: #ebecea}
#carte_wrapper {max-width: 940px; margin: 0 auto;}
#carte_p {max-width: 940px; padding-bottom: 71%; background-repeat: no-repeat; background-size: 100% auto; position: relative;}

/* Marqueurs */
.marker {position: absolute; width: 30px; height: 30px; margin-left: -15px; margin-top: -30px}
.marker .icone {display: block; text-align: center; height: 30px; line-height: 30px; font-size: 30px}

.marker .icone.livre,
.marker .icone.construction {color: #014fa1; background: url(./images/pin_bleu.png) top center no-repeat}
.marker .icone.encours,
.marker .icone.demolition {color: #e40611; background: url(./images/pin_rouge.png) top center no-repeat}
.marker .icone.avenir {color: #4c785f; background: url(./images/pin_vert.png) top center no-repeat}

/* Tooltips */
.marker .tooltip {visibility: hidden; opacity: 0; transition: all 200ms ease; position: absolute; top: 30px; left: 0px; background: #fff; width: 160px; box-shadow: -2px 5px 10px rgba(0,0,0,0.5); z-index: 48;}
.marker .tooltip .titre {padding: 10px; background: #01509f; color: #fff; text-transform: uppercase; font-size: 16px}
.marker .tooltip .content {padding: 10px; font-size: 14px; color: #000}
.marker .tooltip .visuel {height: 80px; background-size: cover; background-position: 50%}
.marker:hover .tooltip {display: block; opacity: 1; visibility: visible;}

.marker .tooltip .link {font-size: 18px; color: #b4883c; text-transform: uppercase; cursor: pointer}
.marker .tooltip .link i {font-size: 24px; vertical-align: middle}

/* Popups */
.popup {position: absolute; top: 0; right: -100px; background: #fff; width: 305px; z-index: 50;}
.popup .titre {padding: 10px 25px 10px 10px; background: #01509f; color: #fff; text-transform: uppercase; font-size: 16px}
.popup .content {padding: 0 10px; font-size: 14px}
.popup .visuel {height: 160px; background-size: cover; background-position: 50%; width: 100%!important;}
.popup .close {position: absolute; top: 0; right: 10px; width: 20px; height: 20px; font-size: 28px; color: #fff; cursor: pointer}
.popup_diapo {height: 160px; width: 100%}
.popup_diapo_wrapper {height: 160px; width: 100%; position: relative}
.prev2,
.next2 {width: 29px; height: 29px; color: #fff; font-size: 22px; line-height: 32px; position: absolute; bottom: 0; left: 0; z-index: 49; background: #000; text-align: center;}
.next2 {left: auto; right: 0}

/* Filtres */
.marker.hidden {display: none}

/* Légende - Programme */
.prog .legende {width: 26%; float: left; border: 3px solid #b4883c; border-right: 0; height: 187px}
.legende img {display: block;}
.legende h3 {color: #fff; background: #b4883c; margin: 0; padding: 10px}

.prog .filtres {width: 74%; float: left; border: 3px solid #004f9f; height: 187px}
.filtres form.statut {width: 17%; float: left; border-right: 3px solid #004f9f;height: 138px; padding: 15px 15px 5px}
.filtres form.secteur {width: 30%; float: left; border-right: 3px solid #004f9f;height: 138px; padding: 15px 15px 5px;-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;}
.filtres form.programme {width: 50%; float: left; height: 138px; padding: 15px 15px 5px;-webkit-column-count: 3; -moz-column-count: 3; column-count: 3;}
.filtres h3 {color: #fff; background: #004f9f; margin: 0; padding: 10px}

/* Légende - Chantiers */
.chantiers .legende {width: 16%; float: left; border: 3px solid #b4883c; border-right: 0; height: 187px}

.chantiers .filtres {width: 84%; float: left; border: 3px solid #004f9f; height: 187px; margin-bottom: 40px}

/* Inputs checkbox des filtres */
.filtres input[type="checkbox"] {visibility: hidden; position: absolute;}
.filtres input[type="checkbox"] + label {cursor: pointer; font-size: 14px;}
.filtres input[type="checkbox"] + label:before {content: "\f372"; display: inline-block; font-family: "Ionicons"; padding-right: 5px; color: #b4883c; font-size: 17px}
.filtres input[type="checkbox"]:checked + label:before {content: "\f373";}

/* Responsive - Tablette (max-width: 1120px) */
@media only screen and (max-width: 1120px) {
    .prog .legende,
    .prog .filtres {height: 237px;}
    .filtres form.statut,
    .filtres form.programme,
    .filtres form.secteur {height: 188px;}
    .filtres input[type="checkbox"] + label {font-size: 12px;}
    .chantiers .filtres form {height: 138px;}
}

/* Responsive - Tablette portrait (max-width: 1020px) */
@media only screen and (max-width: 1020px) {
    .filtres form.secteur {column-count: 1;}
    .filtres form.statut, .filtres form.programme, .filtres form.secteur {height: 230px; padding: 5px}
    .prog .legende, .prog .filtres, .chantiers .legende, .chantiers .filtres {height: 277px;}
    .filtres form.programme {column-count: 2;}
}

/* Responsive - Mobile (max-width: 620px) */
@media only screen and (max-width: 620px) {
    .popup {right: 20px;z-index: 50;}
    .chantiers .legende {width: 100%; float: none;height: 167px; border-right: 3px solid #b4883c; margin-bottom: 10px}
    .prog .legende {width: 100%; float: none;height: 187px; border-right: 3px solid #b4883c; margin-bottom: 10px}
    .chantiers .filtres,
    .prog .filtres {width: 100%; float: none; border: 3px solid #004f9f; height: auto; margin-bottom: 40px;}
    .filtres form.secteur,
    .filtres form.programme,
    .filtres form.statut {width: 100%; float: none; height: auto; border-right: 0}
    .marker .tooltip {left: -90px;}
    .filtres form.programme {column-count: 2;}
}

/* 
  Ionicons, v2.0.0
  Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
  MIT License: https://github.com/driftyco/ionicons
*/

@font-face {
  font-family: "Ionicons";
  src: url("fonts/ionicons.eot?v=2.0.0");
  src: url("fonts/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"),
       url("fonts/ionicons.ttf?v=2.0.0") format("truetype"),
       url("fonts/ionicons.woff?v=2.0.0") format("woff"),
       url("fonts/ionicons.svg?v=2.0.0#Ionicons") format("svg");
  font-weight: normal;
  font-style: normal;
}

.ion,
.ionicons,
.ion-android-arrow-back:before,
.ion-android-arrow-forward:before,
.ion-android-close:before,
.ion-android-checkbox-outline-blank:before,
.ion-android-checkbox-outline:before,
.ion-ios-location:before,
.ion-plus-round:before {
  display: inline-block;
  font-family: "Ionicons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ion-android-arrow-back:before { content: "\f2ca"; }
.ion-android-arrow-forward:before { content: "\f30f"; }
.ion-android-close:before { content: "\f2d7"; }
.ion-android-checkbox-outline-blank:before { content: "\f372"; }
.ion-android-checkbox-outline:before { content: "\f373"; }
.ion-ios-location:before { content: "\f456"; }
.ion-plus-round:before { content: "\f217"; }