.logo {  width: 150px;  height: 100%; }

.logo img { width: 100%;  height: 100%; }

.fot-logo {  width: 200px;  height: 100%; }

.fot-logo img {  width: 100%; }

.auth-nav {   padding-top: 0.5%;  padding-bottom: 0.5%; text-align:right;  padding-right: 15%;  color: #fff; }

.wdt-100 {  width: 100%;  }

.wdt-60 {  width: 60%;  margin: auto;   }

.hgt-100 { height: 100px; }

.hgt-200 { height: 200px; }

.hgt-500 { height: 500px; }

.br-2 {  margin-bottom: 2%; }

.br-3 {  margin-bottom: 3%; }

.br-6 {  margin-bottom: 6%; }

.bgd-effet {  background: rgba(24, 24, 24, 0.8); 
  text-align: center;   background-attachment: relative;  background-position: 
  center center;  height: 100%;  width: 100%;  -webkit-background-size: 100%;
  -moz-background-size: 100%;   -o-background-size: 100%; background-size: 100%;
  -webkit-background-size: cover; -moz-background-size: cover;  
  -o-background-size: cover;    background-size: cover;     
}

.bgd-warn {  background-color: #fce9b2;   }

.bgd-success {  background-color: #dcffe4;   }

.bgd-danger {  background-color: #fdd4d8;   }

.col-10, .col-15, .col-20, .col-25, .col-30, .col-35, .col-40, .col-45, .col-50, .col-85, .col-xx 
{ display: inline-block;  vertical-align: top;  }

.col-85 {  width: 85%;  }

.col-15 {  width: 15%;  }

.col-20 {  width: 20%;  }

.col-25 {  width: 25%;  }

.col-30 {  width: 30%;  }

.col-40 {  width: 40%;  }

.col-45 {  width: 45%;  }

.col-50 {  width: 50%;  }

.col-10 {  display: inline-block;  width: 9%;  vertical-align: top;  }

/* @@@@@@@@@@@@@@@@@@@@     TOP RIGHT NAV     @@@@@@@@@@@@@@@@@@ */
.rght-navs, .rght-nav1, .rght-nav2 {  display: inline-block;  vertical-align: middle;  padding-left: 0.5%;  padding-right: 0.5%;  }

/* .rght-navs {  display: inline-block;  vertical-align: middle;   border-radius: 50%;  } */
.justify-text { text-align: center;  font-size: 16px;  font-weight: 700;   line-height: 1.875; }

.rnd-gy {  width: 30px;  height: 30px;  border-radius: 50%;   background-color: #e8eaed;  color: #222;   }

.rnd-success {  width: 30px;  height: 30px;  border-radius: 50%;   background-color: #28a745;  color: #fff;   }

.rnd-warn {  width: 30px;  height: 30px;  border-radius: 50%;   background-color: #ffc107;  color: #fff;  }

.rnd-danger {  width: 30px;  height: 30px;  border-radius: 50%;   background-color: #dc3545;  color: #fff;  }

/* @@@@@@@@@@@@@@@@@      WYSIWYG     @@@@@@@@@@@@@@@@@@ */
div#editor {
  margin: auto;
  text-align: left;
}

/* @@@@@@@@@@@@@@@@@    DRAG & DROP   @@@@@@@@@@@@@@@@@@@ */
.note {   width: 500px;
  margin: 50px auto;
  font-size: 1.1em;
  color: #333;
  text-align: justify;
}
#drop-area {
  border: 2px dashed #ccc;
  border-radius: 5px;
  width: 80%px;
  margin: 10px auto;
  padding: 20px;
}

#drop-area.highlight {
  border-color: purple;
}
p {
  margin-top: 0;
}
.my-form {
  margin-bottom: 10px;
}
#gallery {
  margin-top: 10px;
}
#gallery img {
  width: 150px;
  margin-bottom: 10px;
  margin-right: 10px;
  vertical-align: middle;
}
.button {
  display: inline-block;
  padding: 10px;
  background: #ccc;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.button:hover {
  background: #ddd;
}
#fileElem {
  display: none;
}

/* @@@@@@@@@@@@@@@@@@@@@      NAV MENU      @@@@@@@@@@@@@@@@@@@@@@@@@ */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 310px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  background-color: #25b88b;
  border: 1px solid #25b88b;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}

.navbar-inverse .nav li.dropdown.open>.dropdown-toggle, .navbar-inverse .nav li.dropdown.active>.dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active>.dropdown-toggle {
  background-color: #25b88b;
  color: #ffffff;
}

.navbar .nav>li>.dropdown-menu:after {
  content: '';
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #25b88b;
  position: absolute;
  top: -6px;
  left: 10px;
}

.dropdown-menu .dropdown-item {  display:block; width:100%; height: 5px; }

/* %%%%%%%%%%%%%%%%%%%%%%%    HEADER DROPDOWN    %%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
.drophd-menu {
  display: none;  position: absolute;  top: 170%;    width: 230px;  background-color: #222;   padding-left: 40%;  padding-right: 4%;
  text-align: left;  padding-bottom: 15%; 
}

.drophd-menu .drophd-item {  width: 100%;   padding-top: 2%;  padding-bottom: 1%;   }

.thead-dark {  background-color: #222;  color: #fff;  }

.pimg {  cursor: default;}

.hide-option { display: none;  }


/* @@@@@@@@@@@@@@@@@@@@@    MARGIN   @@@@@@@@@@@@@@@@@@@@@ */
.mgt-2 { margin-top: 2%; }

.mgt-3 { margin-top: 3%; }

.mgt-4 { margin-top: 4%; }

.mgt-6 { margin-top: 6%; }

.mgtb-2 { margin-top: 2%;  margin-bottom: 2%; }

.mgtb-4 { margin-top: 4%;  margin-bottom: 4%; }

.mgb-2 {  margin-bottom: 2%; }

.mgb-3 {  margin-bottom: 3%; }

.mgb-4 {  margin-bottom: 4%; }

.mgr-1 {  margin-right: 1%; }

.mgr-2 {  margin-right: 2%; }

.pdlr-2 { padding-left: 2%; padding-right: 2%; } 

.pdlr-4 { padding-left: 4%; padding-right: 4%; } 

.pdlr-8 { padding-left: 8%; padding-right: 8%; } 

.pdlr-10 { padding-left: 10%; padding-right: 10%; } 

.pdlr-12 { padding-left: 12%; padding-right: 12%; }

.pdtb-0-5 { padding-top: 0.5%;  padding-bottom: 0.5%; }

.pdtb-1 { padding-top: 1%;  padding-bottom: 1%; }

.pdtb-2 { padding-top: 2%;  padding-bottom: 2%; }

.pdtb-4 { padding-top: 4%;  padding-bottom: 4%; }

.pdtb-5 { padding-top: 5%;  padding-bottom: 5%; }

.pdtb-6 { padding-top: 6%;  padding-bottom: 6%; }

.pdtb-8 { padding-top: 8%;  padding-bottom: 8%; }

.pdtb-12 { padding-top: 12%;  padding-bottom: 12%; }

.pdtb-25 { padding-top: 25%;  padding-bottom: 25%; }

.pdtb-50 { padding-top: 50%;  padding-bottom: 50%; }

.fnt-12 {  font-size: 12px; }

.fnt-14 {  font-size: 14px; }

.fnt-16 {  font-size: 16px; }

.fnt-18 {  font-size: 18px; }

.fnt-20 {  font-size: 20px; }

.fnt-22 {  font-size: 22px; }

.fnt-24 {  font-size: 24px; }

.fnt-fa-20 {  font-size: 20px; }

.text-wt {  color: #fff; }

.text-gy {  color: rgb(126, 126, 126);  }

.text-gy2 {  color: rgb(190, 190, 190);  }

.text-gn {  color: #25b88b;  }

.text-bu {  color: #2457ff;  }

.text-red  { color: rgb(170, 0, 0); }

.text-orng {  color: orangered;   }

.text-warn {  color: #dbac12;  }

.fnt-wgt-900 { font-weight: 900; }

.fnt-wgt-700 { font-weight: 700; }

.fnt-comic {  font-family: "Comic Sans MS"; }

.fnt-itl {  font-style: oblique;  }

.algn-center {  text-align: center; }

.algn-right {  text-align: right; }

.goal-frame  {  height: 300px; }

.brder-bottom { border-bottom: 1px solid #ddd; }

.brder-tb { border-top: 1px solid #ddd;   border-bottom: 1px solid #ddd; }

.brder-gy {  border: 1px solid #ddd;  }

.brder-top-none { border: 1px solid #ddd;   border-top: none;   }

.dflt-pointer {  cursor: default;}

.cursor-pointer {  cursor: pointer; }

.hgt-250 { height: 250px; }

.hgt-170 {  height: 170px; }

.hgt-120 {  height: 120px; }

.post-image img { height: 100%;  width: 100%; }

.views_page img{   width: 170px;   height: 170px;  float: left;   margin-right: 4%;   }

/* @@@@@@@@@@@@@@@@@@@@@        RIGHT SIDE      @@@@@@@@@@@@@@@@@@@@@@@ */
/* -------------        Profile box       --------------- */
.pf-box {  background-color: #25b88b; }

.pf-img { width: 110px;  height: 110px;  border-radius: 50%;  margin: auto;  border: 3px solid #0b4232; }

.pf-img img { width: 100%;  border-radius: 50%; }

.scl-icon {    display: inline-block;  vertical-align: middle;  width: 10%;  border: 1px solid #fff;  }

.scl-icon:hover {      background-color:#000;  }

.scl-icon a {  padding:10px;   display:block;  color: #fff; }

/* @@@@@@@@@@@@@@@@@@@          AUTH          @@@@@@@@@@@@@@@@@@@@@@@ */
.round-icon {  
    width: 150px;  height: 150px; margin: auto;  border-radius: 50%;  font-size: 90px;  
    color: #fff;   background-color: #25b88b;   text-align: center;   line-height: 1.667;
}

.form-group .form-control { width: 100%;}

.btn-v {  
    width: 150px;  height: 35px;  text-align: center;   color: #fff;  
    background-color: #25b88b;  border: none;  font-size: 16px; 
}

.btn-v2 {  
    width: 100px;  height: 35px;  text-align: center;   color: #fff;  
    background-color: #25b88b;  border: none;  font-size: 16px; 
}

.btn-n {  
    width: 150px; height: 35px;    text-align: center;   color: #fff;   
    background-color: rgb(95, 95, 95);  border: none;  font-size: 16px;  line-height: 2.18;
}

/* @@@@@@@@@@@@@@@@@@@@@      MAP FRAME     @@@@@@@@@@@@@@@@@@@@@@@@@ */
.map-frame {  height: 550px;  border: 1px solid #ddd; }

.map-frame iframe {  height: 100%; }

/* @@@@@@@@@@@@@@@@@@@@   REGISTER LAB  @@@@@@@@@@@@@@@@@@@@@@@@ */
.reg-lab {
  background: url(../img/afr.jpg) no-repeat center top;
  text-align: center;   background-attachment: relative;  background-position: 
  center center;  height: 500px;  width: 100%;  -webkit-background-size: 100%;
  -moz-background-size: 100%;   -o-background-size: 100%; background-size: 100%;
  -webkit-background-size: cover; -moz-background-size: cover;  
  -o-background-size: cover;    background-size: cover;
}


.opn-jrnl {  
  background: url(../img/afr2.jpg) no-repeat center top;  
  text-align: center;   background-attachment: relative;  background-position: 
  center center;  height: 200px;  width: 100%;  -webkit-background-size: 100%;
  -moz-background-size: 100%;   -o-background-size: 100%; background-size: 100%;
  -webkit-background-size: cover; -moz-background-size: cover;  
  -o-background-size: cover;    background-size: cover;
}

.reg-effet{ background: rgba(82, 124, 92, 0.9); 
  text-align: center;   background-attachment: relative;  background-position: 
  center center;  height: 100%;  width: 100%;  -webkit-background-size: 100%;
  -moz-background-size: 100%;   -o-background-size: 100%; background-size: 100%;
  -webkit-background-size: cover; -moz-background-size: cover;  
  -o-background-size: cover;    background-size: cover; 
}

.bk-effet { background: rgba(24, 24, 24, 0.9); 
  text-align: center;   background-attachment: relative;  background-position: 
  center center;  height: 100%;  width: 100%;  -webkit-background-size: 100%;
  -moz-background-size: 100%;   -o-background-size: 100%; background-size: 100%;
  -webkit-background-size: cover; -moz-background-size: cover;  
  -o-background-size: cover;    background-size: cover; 
}

.frm-grp {  width: 100%; }

.cc .custom-input { border-radius: 0;  height: 50px;  width: 100%;   }

.cc input[class="custom-input"] { border-radius: 0;  height: 40px;  width: 98%;    }

.ff .custom-input { border-radius: 0;  height: 50px;  width: 100%;  }

.ff input[class="custom-input"] { border-radius: 0;  height: 40px;   width: 96%; }

.ff textarea {  width: 96%; }

.custom-textarea {  height: 150px;   border-radius: 0; }

.tr-warn {  background-color: #fff3cd;  color: #222;  }

.instrumt-bloc {  padding-top: 2%;  padding-bottom: 2%;  padding-left: 5%;  padding-right: 5%; }

.instrumt-bloc .area-text {  height: 70px;   border-radius: 0;  }


/* @@@@@@@@@@@@@@@@@@     SPONSOR & PARTNER    @@@@@@@@@@@@@@@@@@@@ */
.spn-img { display: inline-block;   vertical-align: top;  width: 30%;  height: 60px;  margin-right: 2%;   margin-bottom: 2%;   }

.spn-img img {  width: 100%;   height: 100%; }

/* @@@@@@@@@@@@@@     ATTACHED FILES     @@@@@@@@@@@@@@ */
.attached-files { display: inline-block;  vertical-align: top;   width: 20%;    }

.img-close {  
  width: 100%;   height: 30px;   
}

.img-close-cnt { 
  width: 30px;  height: 30px;  font-size: 18px;  background-color: red;   float: right;    
  line-height: 1.6667;  color: #fff;  
}

.img-file {  width: 100%;   height: 250px;  }

.img-file img, .img-file iframe { width: 100%;  height: 100%; }

.col-sm-6 { display: inline-block;   vertical-align: top;   width: 47%;  }


/*  */
.title2 {
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e1e1e1;
  padding-right: 10px;
  display: inline-block;
  color: #25b88b !important;
  font-weight: normal;
}

/* %%%%%%%%%%     MEDIA SCREEN    %%%%%%%%%%% */
@media (max-width: 767px) {
  /* %%%%%%%%%%%%%%%%%%%%%%%    HEADER DROPDOWN    %%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
  .drophd-menu {
    position: absolute;  top: 170%;  left: -330%;    width: 200px;  background-color: #222;  
  }
}