/*
	auteur  : Mor Abraham GNING
*/
/* GOOGLE FONTS ROBOTO */
@font-face {font-family: rThin;    src:url(../fonts/roboto/Roboto-Thin.woff);}
@font-face {font-family: rLight;   src:url(../fonts/roboto/Roboto-Light.woff);}
@font-face {font-family: rRegular; src:url(../fonts/roboto/Roboto-Regular.woff);}
@font-face {font-family: rMedium;  src:url(../fonts/roboto/Roboto-Medium.woff);}
@font-face {font-family: rBold;    src:url(../fonts/roboto/Roboto-Bold.woff);}


.cadre { border:1px solid #f02}

/*-----------------------
   Typography
------------------------*/
html {   font-size: 100%;}
@media all and (max-width: 768px) {html {font-size: 87.5%; }}
body {font-family: rLight; color: #303030; font-size: 14px; line-height: 20px; background-color: #f5f5f5  }


a {color: #000}
/*
a:hover { color:rgba(244,11,11,1)}
*/

/* GOOGLE MATERIAL */
.btn, .btn-flat { text-transform: none;}
.btn-dakar {border: 1px solid #757575; background: transparent; color:#757575; margin: .5rem 0 0 0;}
.btn-dakar:hover {background: #757575; color:#fff; }
.btn-baol {border: 1px solid #fff; background: transparent; color:#fff; margin: .5rem 0 0 0;  transition: all .3s ease-in;}
.btn-baol:hover {background: #fff ; color:#263238;  transition: all .3s ease-in;}
.btn.veenem {background: #f44336 !important; transition: all .3s ease-in;}
.btn.veenem:hover {background: #b9151b !important; color: #fff !important; transition: all .3s ease-in-out; }
.btn-inverse {border: 1px solid #f44336; background: #fff; color:#f44336; margin: .5rem 0 0 0;  transition: all .3s ease-in;}
.btn-inverse:hover {background: #f44336; color:#fff;  transition: all .3s ease-in-out;}
.venem {background: #f44336 !important; }


#com .collapsible-header {display: block; padding: .5rem 2rem !important}
.toast {font-size:.95rem !important }

#toast-container {top: 70%;}
#toast-container .toast span::after {font-family: 'Material Icons'; content: '\e5cd'; font-size: 1.2rem; font-weight: 300;-webkit-font-feature-settings: 'liga'; color: #fff !important; float: right; padding-left: 2rem; margin-right:-.7rem; cursor:pointer; }
#toast-container .toast::before {font-family: 'Material Icons'; content: '\e7f5'; font-size: 1.5rem; font-weight: 300;-webkit-font-feature-settings: 'liga'; color: #fff !important; float: left; margin-left: -.5rem; padding-right:.7rem; }

.card-action a{text-transform: capitalize !important;}
/* HAPI GENERAL */
.cg-text { color: #004300 }
.cg-fond { background:#004300 }
.cg-ifc {background: linear-gradient(-135deg, #001700, #004300); background: -webkit-linear-gradient(-135deg, #001700, #004300); transition: all .3s ease-in-out;  }
.text-regular { font-family:rMedium !important;}
.text-gras { font-family:rMedium !important;}
.text-ogras {font-weight: 600 !important;}
.text-sgras { font-family:rBold !important;}
.mtitre {font-family: rMedium!important;}
.titre {font-family: rLight !important;}
.italic{ font-family: rThin !important;}
.text-ombre-1 {text-shadow:1px 1px 3px rgba(0,0,0,0.5);}
.text-ombre-2 {text-shadow:2px 2px 3px rgba(0,0,0,0.7);}
.text-justifie {text-align: justify !important;}
.text-maj { text-transform:uppercase }
.text-italic{font-style: italic;}
.text-capital{ text-transform: capitalize}
.text-normal{ text-transform: none; }
.text-petit { font-size:.85rem}
.text-desc { font-size:.95rem; line-height: 1.5rem}
.text-my-1 { font-size:1.1rem; line-height: 1.5rem;}
.text-my-2 { font-size:.8rem;  font-family: rThin !important;}
.text-my-3 { font-size:.8rem; }
.list-ligne {padding-left: 0; margin-left: -5px; list-style: none;}
.list-ligne > li {display: inline-block; padding-right: 5px; padding-left: 5px; }
.list-centre {padding-left: 1%;  list-style: none; }
.list-centre > li {display: inline-block; padding-right: 7.4%; text-align: center !important }
.container-fluid {padding-right: 30px; padding-left: 30px; margin-right: auto; margin-left: auto;}
.material-icons.pointer{cursor: pointer !important;}
container-fluid { padding: 0 5rem !important;}
.barre { border-bottom : .03rem solid rgba(245,245,245,.4); padding-top:.2rem}
.bande{ padding: 8vh 0 ;margin: 60px 0 0 0; height: 25vh; background: #fafafa}
.dl-sta dt{float:left; width:10%; overflow:hidden; clear:left; text-align:right; text-overflow:ellipsis; white-space:nowrap;
  font-family:rLight; font-size:.8rem; line-height:1.6rem; }
.dl-sta dd{margin-left: 15%; font-size:.9rem; font-family:rLight; line-height:1.6rem}
.ifram{ margin-top: .5rem !important;}

/* MENU */
#menu.navbar-fixed { position:fixed; top:60px; right:0; left:0; width:100%;}
nav#goree { position:fixed; top:0; right:0; left:0; width:100%; z-index: 999; }
header nav {position: relative;  top: 0; width: 100%; z-index: 999; }
nav .brand-logo{ display:inline-block; height:60px!important; font-size: 1.2rem;}
nav .brand-logo > img{ vertical-align:middle; height:60px; padding-top: .2rem !important; font-weight: 500;}
header nav a.brand-logo{color: #303030!important;}
header nav a.brand-logo:hover{color:red!important;}
header nav ul a{display: block; color: #303030;font-size:.9rem!important; word-spacing: .1rem; transition: .3s ease-out; font-family: rRegular; }
header nav ul a:hover{color: #666  }
header nav .btn{ padding-left: .8rem; padding-right: .8rem  }
header .row, header .row .col {padding: 0; margin: 0}

header .top{padding: .8rem 0 0 0}
header .topub {
  height: 130px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}
/* header .topub img{ width:95%; height:150px; object-fit:cover; object-position: 100% 50%; } */
header .topli{padding: 60px 0 0 0 !important}

.dropdown-content {display: none; min-width: 250px; max-height: auto; margin-left: -1px; overflow: hidden; opacity: 0; position: absolute; top:-100px !important; white-space: nowrap; z-index: 1; will-change: width, height;}

#smaker{ overflow: hidden !important; }
#langues, #langues2, #langues3{ margin:160px 0 0 0 !important;}

.fixedHead { width: 100%; height: 30vh; display: block; position: relative; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.4), 0 2px 10px 0 rgba(0, 0, 0, 0.4); transition: all .3s ease-in-out; }
.fixedHead h2 { position: absolute; bottom: .5rem; font-size: 2.5rem; color:#FFF; text-shadow:2px 2px 6px rgba(0,0,0,0.7);}

/* footer */
.page-footer {color: rgba(245, 245, 245, .8) ;  }
.page-footer .container { margin-bottom: -20px;  }

.page-footer h6 { color: white; font-size: 14px; padding: .8rem 0rem; }
.page-footer a{color: rgba(245, 245, 245, .8) ; }
.page-footer a:hover{color: rgba(245, 245, 245, 1) ; }
.page-footer .input-field label, #contact .input-field label{color: rgba(245, 245, 245, .8); font-size: 14px }
.page-footer .input-field input, #contact .input-field input, #contact .input-field textarea{color: rgba(245, 245, 245, 1); font-size: 14px }
.page-footer .input-field input[type=email]:focus + label, #contact .input-field input[type=email]:focus + label, #contact .input-field input[type=text]:focus + label, #contact .input-field textarea:focus + label{color: #fff;}
.page-footer .input-field input[type=email]:focus, #contact .input-field input[type=email]:focus {border-bottom: 1px solid #fff; box-shadow: 0 1px 0 0 #fff;}
.page-footer .remonte-xs{ position: relative; top: -40px !important}
#defaut{ padding: 2rem 0;}
#lien .col{ padding: 2rem 0; font-family: rMedium; font-size: 1.5rem}
#denonciation, #sujet, #pratique, #modou, #diourbel, #casamance, .marge{ padding: 3rem 0;}
#diourbel{background: -webkit-linear-gradient(90deg, #263238 50%, #f5f5f5 50%); background: linear-gradient(90deg, #263238 50%, #f5f5f5 50%);}
#casamance{background: -webkit-linear-gradient(180deg, #2196F3 50%, #fff 50%); background: linear-gradient(180deg, #2196F3 50%, #fff 50%);}

.formulaire .input-field{ margin-top: -5px}
.carte .card-image {height:15vh!important; overflow:hidden; }
.carte .card-image img{ min-width:100%; height: 100%; object-fit:cover; object-position: 50% 10%; }
.carte .card-content{height: 12vh !important; }

.carto .card-image {height:25vh!important; overflow:hidden; }
.carto .card-image img{ min-width:100%; height: 100%; object-fit:cover; object-position: 50% 10%; }
.carto .card-content{height: 28vh !important; }

/*** card alert ***/
#card-alert { margin:20px 0;  }
#card-alert i{position:relative;top:2px}
#card-alert button{background:none;border:none;position:absolute;top:5px;right:10px;font-size:35px !important; cursor: pointer;}
#card-alert .card-content p { padding:5px 0 0 40px; font-size:.9rem !important; line-height:1.3rem}


.margo .row{ margin-top: 0; margin-bottom: 0}
.margo .card-panel, .margo .col{ margin-top: 5px; margin-bottom: 0}
nav#partage { height: 50px !important;}
nav#partage ul li{ width: 14% !important;}
nav#partage a:hover{ background: none !important;}

/** slider **/
#accueil{ padding:0!important}
.slider .slides img{background-position:100% 30% !important; }
.slider .slides .caption{ padding:2vh 0 0 0;  }
.slider .slides h2{font-family: rBold; font-size: 2.7rem!important; color:#ffea00; text-shadow:1px 1px 3px rgba(0,0,0,0.5); }
.slider .slides h5{ color:#fff; text-shadow:2px 2px 3px rgba(0,0,0,0.7);  }
.slider .slides p{	padding:1px 0 15px 0!important; }
.slider .slides li:before {content: '';z-index:0; background:rgba(0,0,0,.4); position: absolute; top: 0; left: 0; right: 0; bottom: 0;}

/*banner parallax-container */
#banner .parallax-container {height: auto; }
#banner .parallax-container .parallax:before {content: ''; z-index: 9; background: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
#banner .medium{ padding-bottom: 1rem;}
#banner .banner-text { color:#fff;}
#banner .banner-text h3 {font-family:rMedium;}
#banner .banner-text p{ line-height: 2rem;}
#banner .card-panel{border: 8px solid #62E186; border-radius:0; line-height: 18px!important; height: 180px}
#banner.grey{ padding: 2rem 0 2rem 0;}

/* owl carousel*/
.owl-carousel .owl-item img {height: 150px !important; width: auto;}
.owl-carousel-accueil .item .card-title{ font-size: 16px; font-family: rBold; line-height: 15px; }

/*. Entete fixedHead */
nav.navi-page a.breadcrumb{ font-size:.9rem !important; font-family: rLight;  }
nav.navi-page a.breadcrumb:hover{ color: #fff;}
nav.navi-page a.breadcrumb:before{ color:rgba(245,245,245,.5);}
nav.navi-page a.breadcrumb:last-child { color:rgba(245,245,245,1)}

.presetat  { width: 30vw !important;  margin: 2rem }
.presetot  { width: 25vw !important;  margin: 2rem }
#accueil .parallax-container {   height: 100vh;box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.4), 0 2px 10px 0 rgba(0, 0, 0, 0.2); }
#accueil .parallax-container h1 { position: relative; top: 50vh; color: #fff; text-align: center!important;}

.dl-card dt{float:left; width:20%; font-size: 12px !important; overflow:hidden; clear:left; text-align:right; text-overflow:ellipsis; white-space:nowrap; line-height:1.4rem }
.dl-card dd{margin-left: 25%; line-height:1.4rem }

#denonciation .card .card-title{font-size: 1.1rem !important; text-align: center;}
.hr { width: 25%;}
.scrolla { max-height:40vh!important; overflow-y: scroll;}
.chipy { display: block; width: 90%; height: auto!important; word-wrap: break-word; }

.panelo{position: relative;}
.panelo:before {content: ''; z-index:0 !important; background:rgba(0,0,0,.8); position: absolute; top: 0; left: 0; right: 0; bottom: 0;}{z-index: 0 !important;}
.panelo img{z-index: -1 !important;}
.panelo .panela{ height: 150%; position: absolute; z-index: -2 !important; width: 50%; margin:-70% 0 0 50% !important}
.panelo .panelo-card{position: absolute; z-index: 1!important; top: 25%; left: 2rem; right: 2rem; color: #fff; text-align: center !important}
.balla {margin-top: 6%!important; }
.balla .material-icons{font-size: 3rem !important;}
.balla .barre{padding: 2rem 0!important; position: relative; top: -1rem !important; background-color:#e0e0e0; }

.margo-top-1{margin-top: -.5rem !important}
.cadrage { border:1px solid rgba(71,71,71,.2)}
.carte .card-content{overflow-wrap: break-word; overflow: hidden;}
.overflow-ellipsis{text-overflow: ellipsis}

@media only screen and (max-width: 768px){
  #menu.navbar-fixed { position:fixed; top:0; right:0; left:0; width:100%;}
  header .topli{padding: 10px 0 0 0 !important}
}
@media (max-width: 460px) {
header nav .nav-content a{font-size: 10px;  }
header nav .brand-logo > img{ margin-left: 30px; margin-top: -5px !important; z-index:2 !important}

nav .brand-logo{ width: 100%!important; }

.slider .slides .caption{ padding:1vh 0 0 0;  }
.slider .slides h2{font-size: 1.6em !important; line-height: 2rem !important}
.slider .slides .btn-large{padding: 0 10px!important}

#casamance{background: -webkit-linear-gradient(180deg, #2196F3 100%, #fff 0%); background: linear-gradient(180deg, #2196F3 100%, #fff 0%);}
#casamance .btn-dakar{color: #fff; border: 1px solid #fff}
#diourbel{background: -webkit-linear-gradient(180deg, #263238 50%, #f5f5f5 50%); background: linear-gradient(180deg, #263238 50%, #f5f5f5 50%);}

.dropdown-content {top:30px !important; }
}
.dl-col dt{float:left; width:33%; overflow:hidden; clear:left; text-align:right; text-overflow:ellipsis; white-space:nowrap; font-family:rLight; font-size:.9rem; line-height:1.8rem; }
.dl-col dd{margin-left: 35%; font-size:1rem; font-family:rLight; line-height:1.8rem}