/*
	Le TOCSIN
	licence : 
	auteur  : Mor Abraham GNING
	carte : bleu #007DC5 FC 007DC5 = rgb(0,125,197) ----  gris #E6E6E6 = rgb(230,230,230)
*/
/* 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);}

@font-face {font-family: pHapi; src:url(../fonts/police/Satisfy-Regular.ttf)}
@font-face {font-family: pUbuntu; src:url(../fonts/police/Ubuntu-Light.ttf)}

.cadre { border:1px solid #f02}

/* GENERAL */
html {position: relative; overflow-x: hidden;}
body {font-family:rLight;line-height: 1.4rem;overflow-x: hidden; }
a {color: #007DC5}
a:hover { color: #007DC5}
strong {font-family: rBold !important;}

/* GOOGLE MATERIAL */
.toast {/*background:#007DC5; color:#fff; */font-size:.95rem !important }
#toast-container {left:27%; top: 80%; max-width: 45%;}
.toast .btn, .toast .btn-flat{padding: 0 1rem; text-transform:capitalize; font-size:.9rem !important}
.toast .btn i, .toast .btn-flat i{ font-size:.9rem;}
#toast-container .toast span::after {font-family: 'Material Icons'; content: '\e5cd'; font-size: 1.5rem; font-weight: 300;-webkit-font-feature-settings: 'liga'; color: #fff !important; float: right; padding-left: 0rem; margin-right:-.7rem; cursor:pointer; }
#toast-container .toast::before {font-family: 'Material Icons'; content: '\e7f4'; font-size: 1.5rem; font-weight: 300;-webkit-font-feature-settings: 'liga'; color: #fff !important; float: left; margin-left: -.5rem; padding-right:.7rem; }
/**** nav & breadcrumb ***/
.nav-wrapper a{ color:rgba(51,51,51,.7); }
.nav-wrapper a:hover{ color:rgba(51,51,51,9); }
.nav-wrapper .brand-logo{ display:inline-block; height:50px!important; font-family: rMedium; font-size:1.4rem}
.nav-wrapper .brand-logo.mi-center{ margin-left:100px; }
.nav-wrapper .brand-logo > img{ vertical-align:middle; height:55px !important; z-index:2 !important}
ul.dropdown-content.select-dropdown li span {color: #555;}
ul.dropdown-menu{ margin:65px 0 0 0 !important;}
ul.dropdown-menu a{ color: #333; font-size:0.9em !important;  }
ul.dropdown-menu a:hover { color:#fff; background: transparent; }
ul.dropdown-menu li{ background: rgba(245,245,245,0.9)}
ul.dropdown-menu li:hover {background: #007DC5; color:#fff !important; }
ul.dropdown-menu i{ margin-right:0px; font-size:1.3rem }
.nav-wrapper .breadcrumb { position: relative; top:-.5rem; font-size:.9rem !important; color:rgba(255,255,255,.7)}
.nav-wrapper .breadcrumb:hover { color:rgba(255,255,255,1)}
.nav-wrapper .breadcrumb:last-child { color:rgba(255,255,255,1)}

.card .card-action a{ text-transform:none !important; color: #007DC5}
.card .card-action a:hover{color: #007DC5}
.modal .collection a.collection-item{ color:#666 !important; font-size:.87rem; padding-top:5px;  padding-bottom: 5px }
.archive .collection .collection-item{ font-size:.9rem !important; color:rgba(51,51,51,.8);  }
.flow-text { line-height:2.2rem}
.input-field label {color: #555;}
.input-field .prefix {color: #555; font-size:1.9rem}
.input-field .prefix.active {color: #007DC5;}
.input-field  { margin:2px 0 !important;}
.input-field input:focus + label { color: #007DC5!important;}
.input-field input:focus {border-bottom: 1px solid #007DC5 !important; box-shadow: 0 1px 0 0 #007DC5 !important} 
footer h5 { font-size:1.25rem; font-family: rThin}

/* HAPI GENERAL */
.container-fluid {padding-right: 30px; padding-left: 30px; margin-right: auto; margin-left: auto;}
.text-gras { font-family:rRegular !important;}
.tctitre {font-family: rThin!important;}
.tcitalic{font-family: pHapi;}
.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-capital{ text-transform: capitalize}
.text-petit { font-size:.85rem}
.text-petit-8 { font-size:.8rem}
.text-petit-7 { font-size:.7rem}
.text-moyen {font-size: 1.36rem;} 
.text-moyen-2 {font-size: 1.26rem; padding-bottom:10px} 
.text-moyen-3 {font-size: 1.16rem; line-height:1.5rem; padding-bottom:10px} 
.text-moyen-4 {font-size: 1.15rem; line-height:1.6rem;} 
.list-ligne {padding-left: 0; margin-left: -5px; list-style: none;}
.list-ligne > li {display: inline-block; padding-right: 5px; padding-left: 5px; }
.btn, .btn-flat { text-transform: none;}
.btn.tocsin:hover{ background:#FFF; color: #007DC5 }
.tocsin { background:#007DC5}
.tocsin-text {color: #007DC5 !important}
.fa-ul li{ line-height:1.6rem !important}
.btn.tocsin.renverse:hover{ background:#007DC5; color: #fff }
.btn.tocsin.renverse{ background:#FFF; color: #007DC5 }
.waves-effect.waves-blue .waves-ripple { background-color: rgba(0, 125, 197, 0.7);}
nav.tocsin{ height:50px !important }
nav.tocsin .text-gras{ margin-top:-5px !important }
.page-footer a{ color:rgba(255,255,255,.8)}
.page-footer a:hover{ color:rgba(255,255,255,1)}

#run { padding-bottom:-10rem !important}
/** slider **/
.slider .slides img{background-position:100% 30% !important  }
.slider .slides .caption{ padding:5vh 0 0 0 }
.slider .slides h4{ font-family: rBold; line-height:50px;}
.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;}
.slider span.event::before {font-family: 'FontAwesome'; content: '\f0c0'; float: left; padding-right:5px }
.slider span.date::before {font-family: 'FontAwesome'; content: '\f073'; float: left; padding-right:5px }
/**  **/
.annonce .slider .slides img{background-position:50% 50% !important; }
.annonce .slider .slides {position: relative; overflow: hidden; width: 100%; height: 250px;}
.annonce .slider .slides img{min-width:100%; height:100%; object-fit:none; object-position: 50% 50%;}


.sahel{ position: relative; top:-5rem; z-index:2; color: #007DC5; }
.sahel h5{ font-size:1.2rem; line-height:1.7rem}
.sahel .card-panel{ background:linear-gradient(-180deg, #FBF8FC, #fff); background:-webkit-linear-gradient(-180deg, #FBF8FC, #fff); background:-o-linear-gradient(-180deg, #FBF8FC, #fff);margin-bottom:-5rem !important }
hr.tc {width: 100px; height: 2px; border: 0; margin:25px 0; background: #007DC5;}
hr.tcg {width: 100px; height: 2px; border: 0; margin:25px 0; background: #E6E6E6;}
.inscripa h4{ line-height:2.8rem}
.inscripa ul li{ line-height:2.2rem !important}

/*** card ombre ***/
.card.ombre .card-title { color:#C30; z-index:5!important }
.card.ombre .card-image:before{position: absolute;	top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); content: ''; -webkit-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0);}
.card.ombre-noir .card-image:before{position: absolute;	top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 50%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 50%); content: ''; -webkit-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0);}

/*** table hover  ***/
table#piness, table#pinell {border-collapse: collapse;}
#piness td:hover, #pinell td:hover {cursor: pointer;}
#piness .logo, #pinell .logo {position: relative; overflow: hidden; width: 60px; height: 60px;}
#piness .logo img{margin:0px 0px !important; min-width:100%; height: 100%; object-fit:cover; object-position: 50% 5%;}

/*** 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;}
#card-alert .card-content p { padding:5px 0 0 40px; font-size:.9rem !important; line-height:1.3rem}

/*** COLOR DEGRADE  ***/
.mor-1{background: linear-gradient(65deg, #01579b, #80cbc4); background: -webkit-linear-gradient(65deg, #01579b, #80cbc4); background: -moz-linear-gradient(65deg, #01579b, #80cbc4);}
.mor-2{background: linear-gradient(283deg, #880e4f, #f06292); background: -webkit-linear-gradient(283deg, #880e4f, #f06292);background: -moz-linear-gradient(283deg, #880e4f, #f06292);}
.mor-3{background: linear-gradient(-80deg, #76ff03, #1b5e20); background: -webkit-linear-gradient(-80deg, #76ff03 , #1b5e20);background: -moz-linear-gradient(-80deg, #76ff03 , #1b5e20);}
.mor-4{background: linear-gradient(265deg, #ffca28, #e65100); background: -webkit-linear-gradient(265deg, #ffca28, #e65100);background: -moz-linear-gradient(265deg, #ffca28, #e65100);}
.mor-5{background: linear-gradient(65deg, #9575cd , #311b92 ); background: -webkit-linear-gradient(65deg, #9575cd , #311b92 );background: -moz-linear-gradient(65deg, #9575cd , #311b92 );}
.mor-6{background: linear-gradient(-115deg, #f50057, #d50000); background: -webkit-linear-gradient(-115deg, #f50057, #d50000); background: -moz-linear-gradient(-115deg, #f50057, #d50000);}
.mor-7{background: linear-gradient(90deg, #004d40, #827717); background: -webkit-linear-gradient(90deg, #004d40, #827717); background: -moz-linear-gradient(90deg, #004d40, #827717);}
.mor-8{background: linear-gradient(305deg, #a1887f, #212121); background: -webkit-linear-gradient(305deg, #a1887f, #212121); background: -moz-linear-gradient(305deg, #a1887f, #212121);}

.mor-9{ background: linear-gradient(to right, #4a148c 0%, #007DC5 95%); background: -webkit-linear-gradient(to right, #4a148c 0%, #007DC5 60%); background: -o-linear-gradient(to right, #4a148c 0%, #007DC5 60%); background: -moz-linear-gradient(to right, #4a148c 0%, #007DC5 60%);}
.mor-9:hover{background: linear-gradient(to right, #4a148c 0%, #007DC5 95%); background: -webkit-linear-gradient(to right, #290B4F 0%, #9400AE 60%); background: -o-linear-gradient(to right, #290B4F 0%, #9400AE 60%); background: -moz-linear-gradient(to right, #290B4F 0%, #9400AE 60%);}
.mor-10{ background: linear-gradient(to right, #4a148c 0%, #007DC5 95%); background: -webkit-linear-gradient(to bottom right, #9575cd 0%, #311b92 60%); background: -o-linear-gradient(to bottom right, #9575cd 0%, #311b92 60%); background: -moz-linear-gradient(to bottom right, #9575cd 0%, #311b92 60%);}
.mor-10:hover{background: linear-gradient(to right, #4a148c 0%, #007DC5 95%); background: -webkit-linear-gradient(to bottom right, #683FAD 0%, #1B0F53 60%); background: -o-linear-gradient(to bottom right, #683FAD 0%, #1B0F53 60%); background: -moz-linear-gradient(to bottom right, #683FAD 0%, #1B0F53 60%);}
.mor-11{background: linear-gradient(305deg, #005323, #00A849); background: -webkit-linear-gradient(305deg, #005323, #00A849); background: -moz-linear-gradient(305deg, #005323, #00A849);}

.barre-horizon-top{ border-top: 1px solid rgba(160,160,160,.2)}

.dl-del dt{float:left; width:20%; overflow:hidden; clear:left; text-align:right; text-overflow:ellipsis; white-space:nowrap; font-family:rLight; font-size:.9rem; line-height:1.5rem; }
.dl-del dd{margin-left: 25%; font-size:1rem; font-family:rLight; line-height:1.5rem}

.dl-adr dt{float:left; width:10%; overflow:hidden; clear:left; text-align:right; text-overflow:ellipsis; white-space:nowrap; font-family:rLight; font-size:.9rem; line-height:1.5rem; }
.dl-adr dd{margin-left: 15%; font-size:1rem; font-family:rLight; line-height:1.5rem}

.bande { padding:3rem 0;}
#defaut { padding:4rem 0;}
.ouaga { padding:3rem 0; background: linear-gradient(50deg, rgba(160,160,160,.1), rgb(255,255,255)); 
background: -o-linear-gradient(50deg, rgba(160,160,160,.1), rgb(255,255,255));
 background: -moz-linear-gradient(50deg, rgba(160,160,160,.1), rgb(255,255,255));  
 background: -webkit-linear-gradient(50deg, rgba(160,160,160,.1), rgb(255,255,255));  }

.card.photo .card-image img{ width:100%; min-height: 100%; object-fit:cover; object-position: 50% 50%; }
#cayor marquee p{ margin:0 !important; padding:0 !important}
.adresse{background:linear-gradient(-90deg, rgba(51,51,51,.1), #fff); background:-webkit-linear-gradient(-90deg, rgba(51,51,51,.1), #fff); background:-o-linear-gradient(-90deg, rgba(51,51,51,.1), #fff);margin-bottom:-5rem !important }
.list-ligne .btn{height:26px; line-height:26px; padding: 0 .5rem;}

/*  SORTIE ECRAN */
@media (max-width: 768px) {
 h2.tcitalic { font-size:2.8rem; line-height:3.3rem}
 h3.tcitalic { font-size:2.5rem; line-height:3rem}
 
}


@media (max-width: 480px) {
  #toast-container {left:0; top: 80%; max-width: 90%;}

  h2.tcitalic { font-size:2.8rem; line-height:3.3rem}
  h3.tcitalic { font-size:2.4rem; line-height:3rem}
 .flex-s {display: flex; flex-direction: column; } /* ordonner l'affichage en small*/
 .box-a {order: 2;}	
 .container-fluid { padding-right: 0; padding-left: 0; }
 .slider .slides .caption{ padding:0 }
 .slider .slides h4{font-size: 1.5rem; text-align:center}
 .slider .slides h5{font-size: 1.2rem; line-height:22px; text-align: center}
 .slider .slides p a{text-align: center!important}

.nav-wrapper .brand-logo{height:20px!important; font-size:1.2rem}
.nav-wrapper .brand-logo.mi-center{ margin-left:0; }
.nav-wrapper .brand-logo > img{ height:45px !important;}

.text-moyen {font-size: 1rem;} 
.slider .slides h4{line-height:30px;}
.sahel .card-panel{ margin-bottom:40px !important; padding-bottom:40px !important; }

}