#optionN{
background: #fff;
color: #000;
}
#sec{
color : red;
}
div.dataTables_info {
padding-top: 42px;
}
#nanouch{
padding: 1em;
}
h1 {
font-size: 18px;
border-left: 1px solid #7BC342;
}
.mySlides {display:none;}
.alert {
position: absolute;
left: 50%;
top: 2%;
z-index: 1;
}
.alert-Ren {
background: white;
border: 2px solid #4AB2D6;
border-radius: 10px;
width: 50%;
padding: 1em;
color: #151212;
margin: auto;
margin-top: 11%;
}
.alert-R {
background: #4AB2D6;
padding: 12px;
margin-top: -2em;
color: white;
border-radius: 10px;
}
.pop {
position: fixed;
text-align: center;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 400;
border: 1px solid #FFF;
background-color: rgba(0, 0, 0, 0.49);
}
.tst{
text-align: justify;
font-size: 19px;
}
#new{
background-color: #ff0000b3;
width: 10%;
padding: 0.1em;
float: right;
color: white;
text-align: center;
font-size: 11px;
border-radius: 6px;
}
.aut{
width :1200px;
}
@media only screen and (min-width : 1224px) {
html {
width: 100%;
background-color:red;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.cachecache{
display: none;
}
body {
width: auto;
color:#6f6f6f;
position:absolute;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#AO{
width: 20%;
margin: auto;
display: block;
}
.feet{
display: none;
}
.App{
width: 20%;
}
/*
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.2);
padding-top: 50px;
}
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
border: 1px solid #888;
width: 60%;
margin-top: 4em;
}
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
*/
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.2);
padding-top: 50px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
border: 1px solid #888;
width: 18%;
float: right;
margin-top: 4em;
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
input[type=text], input[type=password], input[type=email], input[type=tel]{
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
box-sizing: border-box;
}
.container {
padding: 16px;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
/* Set a style for all buttons */
button {
background-color: #125688 ;
border-radius: 13px;
color: white;
padding: 14px 20px;
cursor: pointer;
width: 30%;
}
button:hover {
opacity: 0.8;
}
header{
width: 101%;
background: linear-gradient( to bottom right, #2b76b9 30%, white);
margin-top: -0.5em;
margin-left: -0.5%;
}
header .logo{
width: 50%;
margin-top: 2%;
margin-bottom: 1%;
}
#fbp{
margin-top: 6em;
margin-left: 18.5em;
}
tr.hover1:hover {
background-color:#e6e3e3;
}
a.lien {
color:black;
text-decoration: none;
}
.mobilemenu{
display: none;
}
.hidi{
display: initial;
color: white;
}
.inscription{
margin-top: 4%;
margin-left: 13%;
padding: 1%;
width: 75%;
color: black;
font-weight: bold;
background-color: white;
border:1px solid #00a0e3;
border-radius: 10px;
}
.inscription td{
padding: 0.25%;
padding-right: 0.25%;
}
.inscription th{
margin-left: -15%;
background-color: #125688;
border-radius: 10px;
padding: 1%;
margin-left: -1%;
width: 100%;
font-size: 18px;
color:white;
}
.inscription .infop th{
margin-left: -15%;
border-radius: 10px;
padding: 1%;
margin-left: -1%;
width: 100%;
font-size: 16px;
color:white;
}
.inscription input{
border:1px solid #00a0e3;
border-radius: 10px;
width: 50%;
height: 35px;
padding-left: 1%;
outline: none;
}
.inscription select{
border:1px solid #00a0e3;
width: 100%;
height: 35px;
padding: 0.25%;
border-radius: 10px;
margin-bottom :2em;
}
.inscription .tit{
border:1px solid #00a0e3;
width: 5%;
color: black;
height: 12px;
outline: none;
}
.inscription .tit label{
font-weight: bold;
font-size: 18px;
color: black;
}
.confirmation button{
margin-top: 1%;
font-weight: bold;
background-color: #00a0e3;
border-color:#00a0e3;
border-radius: 10px;
color: white;
width: 10%;
outline: none;
}
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #4AB2D6;
width: 10%;
min-height: 920px;
margin-left: 2%;
margin-top:2%;
border-top-left-radius: 10px;
margin-bottom: 2em;
}
/* Style the buttons that are used to open the tab content */
.tab button {
display: block;
background-color: #4AB2D6;
color: white;
font-weight: bold;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
width: 100%;
margin-top: 10%;
margin-left:15%;
color: #2b76b9;
font-weight: bold;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
border-top-right-radius: -10%;
height: 120px;
background-color: white;
}
/*Recherche*/
/* Style the tab content */
.tabcontent {
margin-top: 2%;
margin-bottom: 2%;
margin-right: 4% !important;
float: right;
padding: 0px 12px;
border-radius: 10px;
border: 1px solid #ccc;
background-color: white;
width: 81%;
border-left: none;
min-height: 920px;
}
.tabcontet {
margin-top: 2%;
margin-bottom: 2%;
margin-left: auto;
margin-right: auto;
padding: 0px 12px;
border-radius: 10px;
border: 1px solid #ccc;
background-color: white;
width: 80%;
border-left: none;
}
.tab .icon{
width: 85%;
margin-left: 5%;
background-image: url(img/appel.png);
}
.tab .icon2{
margin-top: -2%;
width: 60%;
margin-left: 10%;
background-image: url(img/appel.png);
}
.sercli{
width: 71%;
margin-top: 2%;
margin-left: 15%;
margin-right: 10%;
box-shadow: 5px -3px 10px grey;
border-radius: 5px;
}
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #333333a3;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 13px;
position: fixed;
z-index: 1;
left: 76%;
bottom: 34em;
font-size: 14px;
}
#snackbar.show {
visibility: visible;
/*
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
*/
}
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
.badge1 {
position:relative;
border-radius: 10px;
background-color: #7BC342;
border-color: #7BC342;
border-style: solid;
outline: none;
}
.badge1[data-badge]:after {
content:attr(data-badge);
position:absolute;
top:-10px;
right:-10px;
font-size:1em;
background:red;
color:white;
width:18px;height:18px;
text-align:center;
line-height:18px;
border-radius:50%;
box-shadow:0 0 1px #333;
}
.favo{
display: block;
cursor: pointer;
margin: auto;
width: 56%;
height:80%;
}
.icon{
margin-right:2%;
width: 25%;
float: right;
border-radius: 10px;
border-color: #2b76b9;
}
.welcome{
margin-top: -2%;
font-size: 18px;
font-family: 'Lato';
color: white;
}
.menu {
margin-right: -20%;
}
.menu ul{
display: block;
}
.menu li{
padding: 2%;
letter-spacing: 1px;
font-size: 16px;
font-weight: bold;
color: white;
display: inline-block;
border-radius: 10px;
}
.menu li:hover{
background-color: #6CCB17;
}
.menu li.active{
background-color: #7BC342;
border-left: 2px solid orange;
}
.social{
float: right;
margin-top: -8%;
margin-right: 25%;
}
.client {
border-radius: 10px;
font-weight: bold;
color: white;
background-color: #7BC342;
border-color: #7BC342;
padding: 2%;
outline: none;
margin-right: 5%;
}
.client:hover{
cursor: pointer;
}
.client a{
width: 100%;
height: 100%;
}
.client:focus {outline:0;}
.esp{
margin-top: -12%;
margin-right: 26%;
}
.lang{
width: 13%;
position: relative;
height: 20px;
padding-left: 2px;
float: right;
font:bold 13px 'Palanquin';
color: white;
background-color: white;
margin-left: 2%;
border-radius: 10px;
background-color: #125688;
border-color: #125688
}
.lang:focus {outline:0;}
.lang:hover{
cursor: pointer;
}
.logo{
margin-top: -2%;
width: 30%;
}
.bfavo{
padding: 2%;
margin-left: -3%;
margin-right: 1%;
outline: none;
color: white;
font-family: 'Lato';
font-size: 16px;
background-color: #7BC342;
border-color: #7BC342;
border-radius: 10px;
}
.offre{
width: 70%;
margin-top: 3%;
padding: 2%;
background-color: white;
border-radius: 10px;
margin-left: 16%;
}
.offre th{
background-color:#2b76b9 ;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
padding: 1%;
color: white;
}
.offre .tyype{
width: 30%;
padding: 2%;
margin-top: -3%;
margin-right: 2%;
border-radius: 20px;
border-top-left-radius: 0;
background-color: #F8F8FF;
}
.offre ul li{
font-size: 16px;
}
.tyype th{
color: black;
}
.tyype td{
color: black;
}
.tyype ul{
margin-top: 3%;
list-style-type: none;
margin-left: -2em;
}
.tyype ul li{
color: black;
padding: 2%;
}
.tyype li:hover{
background-color: #7BC342;
color: white;
border-radius: 10px;
}
.offre .resum {
width: 100%;
border-collapse: collapse;
}
.offre .resum td{
font-size: 16px !important;
}
.offre span{
font-size: 18px;
color: black;
display:initial;
}
.resum td{
color: black;
padding: 1%;
}
.resum th{
background-color:#2b76b9 ;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
padding: 1%;
color: white;
}
.resum .mont{
font-weight: bold;
font-size: 18px;
color: #7BC342;
}
.recherche{
margin-top: 2%;
margin-left: auto;
margin-right: auto;
width:90%;
padding: 1%;
padding-bottom: 2%;
border-spacing: 0.5px;
border-radius: 10px;
}
.recherche th{
background-color: #7BC342;
padding: 1%;
color: white;
letter-spacing: 1.5px;
font-weight: bold;
font-size: 18px;
border-collapse: collapse;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.recherche input{
width: 95%;
border-radius: 10px;
border-color: #00a0e3;
padding:1%;
}
.recherche input:focus{
outline: none;
}
.recherche td{
padding: 0.25%;
}
.recherche select{
width: 95%;
border-radius: 10px;
border-color: #00a0e3;
padding:1%;
}
.recehrche label{
padding: 1%;
}
.recherche input{
border:1px solid #2b76b9;
}
.recherche .submit{
width: 47%;
height: 40px;
color: #fff;
font-weight: 900;
border-radius: 10px;
background-color: #7BC342 ;
border-color: #7BC342 ;
outline: none;
border-style: solid;
}
.sticky-container{
padding:0px;
margin:0px;
position:fixed;
right:-130px;
top:400px;
width:210px;
z-index: 1100;
}
.sticky li{
list-style-type:none;
background-color:#125688;
color:#efefef;
height:43px;
padding:0px;
margin:0px 0px 1px 0px;
-webkit-transition:all 0.25s ease-in-out;
-moz-transition:all 0.25s ease-in-out;
-o-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
cursor:pointer;
}
.sticky li:hover{
margin-left:-115px;
}
.sticky li img{
float:left;
margin:5px 4px;
margin-right:5px;
}
.sticky li p{
padding-top:5px;
margin:0px;
line-height:16px;
font-size:11px;
}
.sticky li p a{
text-decoration:none;
color:white;
font-weight: bold;
}
.sticky li p a:hover{
text-decoration:underline;
}
.sector {
margin-top: 2%;
background-color: #4AB2D6 ;
border-color: #4AB2D6 ;
padding: 1%;
border-radius: 10px;
color: white;
font-size: 16px;
text-align: left;
font-weight: bold;
outline: none
}
.sector option{
width:40%;
}
.sectorr{
margin-top: 1%;
background-color: #7BC342 ;
border-color: #7BC342 ;
padding: 1%;
border-radius: 10px;
color: white;
font-size: 14px;
font-weight: bold;
outline: none;
border-style: solid;
}
.topp{
width: 80%;
margin-top: 6%;
margin-left: auto;
margin-right: auto;
padding: 1%;
background-color: #EFF0F0;
}
.sider{
width: 90%;
background-color: white;
color: black;
padding: 2%;
font-size: 16px;
border:2px solid #125688;
border-radius: 10px;
}
.sider th{
background-color: #2b76b9;
}
.appel{
width: 100%;
border: 2px solid rgba(225, 229, 234, 0.52);
padding: 0.2em;
color:black;
font-size: 18px;
}
.appel .App{
padding: 14px;
}
.appel .det {
width:100% ;
display:block;
margin:auto;
}
/*.appel tr:nth-child(odd) { background-color:red; }
.appel tr:nth-child(even) { background-color:green; }*/
.appel tr{
width:100%;
padding: 1%;
}
.appel th{
border-bottom: 5px solid #e8770c;
color: #125688;
padding: 1%;
font-size: 12px;
font-weight: bold;
}
.appel td{
/**/
padding: 11px;
border: 0.1px solid #e8e8e8;
color: black;
font-size: 14px;
/*border-bottom: 1px solid black;
border: 1px dotted black;*/
}
.map{
margin-left: 2.5%;
margin-top: 10%;
}
.map td{
padding: 5%;
}
.map iframe{
padding: 1%;
box-shadow: 0px -10px 0px 0px 30px grey;
}
.contact{
float: right;
width: 40%;
padding-top: 2%;
padding-left: 2%;
padding-bottom: 2%;
box-shadow: 3px 2px 30px grey;
margin-right: 10%;
margin-top: 11%;
background-color: white;
border:1px solid black;
border-radius: 5px;
}
.contact th{
padding-bottom: 2%;
font-weight: bold;
text-decoration: underline;
font-size: 18px;
color: black;
}
.contact tr{
}
.contact td{
font-weight: bold;
font-size: 16px;
color: black;
align-content: left;
border-spacing: 10px;
}
.contact input{
width: 85%;
padding: 1%;
border-radius: 5px;
border:1px solid #00a0e3;
}
.contact button{
background-color: #125688;
border-color: #125688;
border-radius: 10px;
width: 50%;
color: white;
padding: 1%;
font-weight: bold;
margin-top: 10%;
margin-left: 80%;
}
.contact textarea{
width: 85%;
height: 150px;
}
.info{
width: 30%;
margin-top: 12%;
margin-left: 10%;
float: left;
background-color: white;
border:1px solid black;
border-radius: 5px;
box-shadow: 2px -3px 20px grey;
}
.info th{
color:black;
font-weight: bold;
text-decoration: underline;
padding:2%;
}
.info td{
color:black;
padding: 2%;
padding-left: 5%;
}
.info td span{
color: black;
font-size: 18px;
}
.info a{
font-weight: bold;
font-size: 18px;
}
.info h3{
font-size: 18px;
}
.map{
margin-top: 10%;
}
.map td{
padding: 5%;
}
.map iframe{
padding: 1%;
box-shadow: 0px -10px 0px 0px 30px grey;
}
.presenta{
width: 90%;
margin-left: 5%;
margin-top: 15%;
border-collapse: collapse;
}
.presenta tr:nth-child(odd){
background-color: #E6E6FA;
}
.presenta .cone{
width: 90%;
height: 300px;
}
.presenta .para{
width: 70%;
margin-top: -5%;
margin-left: 15%;
text-align: justify;
color: #125688;
font-weight: bold;
font-size: 16px;
}
.presenta .parag{
width: 70%;
margin-top: -5%;
margin-left: 15%;
text-align: justify;
color: #125688;
line-height: 1.5em;
font-weight: bold;
font-size: 16px;
}
.presenta .parag a{
color: #125688;
font-size: 18px;
font-weight: bold;
}
.presenta li{
padding: 1%;
}
.detail{
width: 60%;
margin-top: 14%;
margin-left: 20%;
border-radius: 10px;
border-collapse: collapse;
background-color:white;
}
.entreprise{
width: 85%;
margin-top: 12%;
margin-left: 7.5%;
padding:2%;
border-radius: 10px;
box-shadow: 2px 3px 20px grey;
text-align: justify;
background-color: white;
color: #2b76b9;
font-size: 16px;
font-weight: bold;
}
.deska{
width: 80%;
height: 250px;
margin-left: 15%;
}
.entreprise th{
color: black;
padding-left: -50%;
margin-left: -10%;
border-left:5px solid orange;
}
.tarif{
width: 85%;
margin-top: 1%;
border-radius: 10px;
box-shadow: 2px -3px 20px grey;
background-color: white;
margin-left: 7.5%;
}
.tarif th{
border-left: 5px solid orange;
font-size: 18px;
color: #125688;
padding: 2%;
}
.tarif .apoff{
width: 80%;
margin-left: 7%;
border-spacing: 10px;
}
.apoff th{
border-left: none;
}
.apoff .titre{
border-radius: 10px;
background: linear-gradient( to right, #DCDCDC 60%, white);
}
.apoff .yellow{
background-color: orange;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-bottom: 0.5%;
padding: 1px;
width: 30%;
}
.apoff h2{
color: black;
text-shadow: 2px 1px 5px white;
font-size: 22px;
}
.apoff .blue{
background-color: #125688;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 1px;
padding-bottom: 1%;
width: 30%;
}
.apoff .tit{
color: white;
text-shadow: none;
font-size: 22px;
}
.apoff .desc{
width: 100%;
margin-left: 4%;
border-bottom-left-radius: 10px;
color: black;
background-color: white;
}
.prix{
width: 65%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 22px;
font-weight: bold;
text-shadow: 1px 1px 10px black;
margin-left: 22%;
background-color: #96ba48;
border-bottom-left-radius:10px;
}
.comm{
width: 50%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 16px;
font-weight: bold;
border-color: orange;
outline: none;
text-shadow: 1px 1px 10px orange;
margin-left: 41.5%;
background-color: orange;
border-top-left-radius:10px;
border-bottom-right-radius: 5px;
}
.comm2{
width: 50%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 16px;
font-weight: bold;
border-color: #125688;
outline: none;
text-shadow: 1px 1px 10px #125688;
margin-left: 43%;
background-color: #125688;
border-top-left-radius:10px;
border-bottom-right-radius: 5px;
}
.comm3{
width: 60%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 12px;
font-weight: bold;
border-color: #125688;
outline: none;
text-shadow: 1px 1px 10px #125688;
margin-left: 33%;
background-color: #125688;
border-top-left-radius:10px;
border-bottom-right-radius: 5px;
}
.descr{
width: 100%;
margin-left: 4%;
border-bottom-left-radius: 10px;
color: black;
font-size: 16px;
font-weight: bold;
background-color: white;
}
.tarif .servad{
width: 80%;
margin-top: 2%;
margin-left: 7%;
border-spacing: 10px;
border-radius: 10px;
background-color: white;
}
.servad td{
border-left: none;
}
.servad th{
border-radius: 10px;
padding: 1%;
border-left: none;
background: linear-gradient( to right, #DCDCDC 60%, white);
}
.servad .titr{
color: white;
text-shadow: none;
font-size: 16px;
}
.servad .blu{
background-color: #125688;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 1px;
padding-bottom: 1%;
width: 30%;
}
.servad .suivre{
width: 90%;
padding: 3%;
border-radius: 10px;
background-color: white;
}
.suivre li{
color: black;
line-height: 2em;
font-size: 16px;
font-weight: bold;
list-style-type: none;
margin-left: -20%;
}
.servad .pri{
color: white;
margin-top: 2%;
padding: 2%;
font-size: 32px;
font-weight: bold;
}
.banpub{
width: 85%;
margin-top: 2%;
margin-left: 7.5%;
border-spacing: 10px;
padding: 2%;
border-radius: 10px;
text-align: justify;
box-shadow: 2px 3px 20px grey;
background-color: white;
}
.banpub th{
border-left: 5px solid orange;
font-size: 18px;
color: #125688;
padding: 1%;
}
.banpub .descri{
color: black;
padding: 5%;
font-size: 16px;
}
.banpub .pub{
border-collapse: collapse;
width: 80%;
margin-left: 7.5%;
padding: 1%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #125688;
}
.pub th{
color: white;
border-left: none;
}
.pub .banni{
width: 99.75%;
margin-left: 0.5%;
border-collapse: collapse;
background-color: white;
}
.pub .comma{
float: right;
color: white;
font-size: 18px;
margin-top: -3%;
margin-right: -0.25%;
height: 30px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-color: #125688;
background-color: #125688;
width: 20%;
}
.banni td{
color: black;
font-size: 18px;
font-weight: bold;
padding: 2%;
}
.banni li{
color: #125688;
margin:2%;
}
.detail th{
background-color: #2b76b9;
border-radius: 10px;
padding:1%;
color:white;
font-size: 18px;
font-weight: bold;
}
.detail td{
color: black;
font-size: 18px;
padding: 0.5%;
padding-left: 3%;
}
.detail .montant{
width: 80%;
background-color: #2b76b9;
color: white;
font-size: 16px;
margin:1%;
border:3px ridge #e8770c;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 90% 100%, 75% 0);
}
.annonceur{
width: 60%;
margin-top: 1%;
margin-left: 20%;
border-radius: 10px;
background-color:white;
}
.annonceur td{
color: black;
font-size: 16px;
font-weight: bold;
padding: 1%;
padding-left: 3%;
}
.annonceur th{
background-color: #2b76b9;
border-radius: 10px;
padding:1%;
color:white;
font-size: 18px;
font-weight: bold;
}
.annonceur button{
width: 10%;
padding: 1%;
border-radius: 10px;
background-color: #00a0e3;
color: white;
font-weight: bold;
}
.capture{
width: 70%;
margin-top: 1%;
margin-left: 16%;
border-radius: 10px;
background-color:white;
padding-bottom: 2%;
}
.capture th{
background-color: #2b76b9;
border-radius: 10px;
padding:1%;
color:white;
font-size: 18px;
font-weight: bold;
}
.capture td{
color: black;
font-size: 16px;
font-weight: bold;
padding: 1%;
padding-left: 3%;
}
.capture tr{
padding-right: 2%;
padding-left: 2%;
}
.capture .source{
width: 25%;
padding-left: 1%;
font-size: 16px;
font-weight: bold;
background-color: #2b76b9;
color: white;
font-size: 14px;
margin:1%;
font-weight: bold;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 90% 100%, 75% 0);
}
.capture .zonecap{
width: 60%;
margin-left: 10%;
padding-right: 3%;
cursor: zoom-in;
}
.favo{
margin: auto;
margin-top: 10%;
margin-bottom: 2%;
width: 75%;
background-color: white;
color:white;
border-radius: 10px;
}
.favo th{
width: 15%;
font-weight: bold;
padding: 1%;
border-radius: 10px;
font-size: 16px;
background-color: #125688;
border-bottom: 2px solid orange;
}
.favo .titre{
background-color: white;
color:black;
}
.favo td{
color: black;
padding: 0.5%;
padding-left: 1.5em;
}
.favor{
margin: auto;
margin-top: 2%;
margin-bottom: 2%;
width: 75%;
background-color: white;
color:white;
border-radius: 10px;
}
.favor th{
width: 15%;
font-weight: bold;
padding: 1%;
border-radius: 10px;
font-size: 16px;
background-color: #125688;
border-bottom: 2px solid orange;
}
.favor .titre{
background-color: white;
color:black;
}
.favor td{
color: black;
padding: 0.5%;
padding-left: 1.5em;
}
.back input{
background-color: #125688;
border-color: #125688;
border-radius: 10px;
outline: none;
color: white;
height: 30px;
margin-left: 3em;
margin-top:7em;
}
.archive{
margin-top: 3%;
width:80%;
background-color: white;
border-radius: 10px;
padding-bottom: 2%;
}
.archive th{
background-color: #2b76b9;
padding: 1%;
color: white;
letter-spacing: 0.5px;
font-weight: bold;
font-size: 16px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.archive input{
width: 90%;
border-radius: 10px;
border-color: #00a0e3;
padding:1%;
}
.archive input:focus{
outline: none;
}
.archive td{
width: 20%;
}
.archive .wilaya{
width: 95%;
border-radius: 10px;
border-color: #2b76b9;
margin-left: 12%;
padding:2%;
}
.archive .wilaya:focus{
outline: none;}
.archive .secteur{
width: 95%;
border-radius: 10px;
border-color: #2b76b9;
margin-left: 7%;
padding:2%;
}
.archive .secteur:focus{
outline: none;}
.archive .rech{
width: 85%;
margin-left: 3%;
color: white;
letter-spacing: 0.5px;
font-weight: bold;
font-size:16px;
border-radius: 10px;
padding: 2%;
background-color: #2b76b9;
border-color: #2b76b9;
}
.archive .rech:focus{
outline: none;
}
.archive .type{
width: 86%;
border-radius: 10px;
border-color: #2b76b9;
margin-left: -9%;
padding:2%;
}
.archive .type:focus{
outline: none
}
.archive .titre{
width: 90%;
padding: 2%;
margin-left: 12%;
}
.archive .titre:focus{
outline: none
}
.archive .organ{
width: 90%;
padding: 2%;
margin-left: 7%;
}
.archive .organ:focus{
outline: none
}
.archive .source{
width: 80.5%;
margin-left: 2.5%;
padding: 2%;
}
.archive .source:focus{
outline: none
}
.archive .datep{
width: 50%;
margin-left: 29%;
padding: 2%;
padding-left: 10%;
}
.archive .datep:focus{
outline: none
}
.archive .datee{
width: 60%;
margin-left: 21%;
padding: 2%;
padding-left: 10%;
}
.archive .datep:focus{
outline: none
}
.foot{
margin-top: 1%;
margin-left: -0.5%;
margin-bottom: -1%;
width: 101%;
background: linear-gradient( to top right, #2b76b9 40%, #0588BC);
padding-bottom: 1%;
line-height: 1.25em;
}
.foot th{
height: 20px;
}
.foot .logoo{
margin-top: 2%;
width: 80%;
}
.foot .logo img{
width: 40%;
}
.foot h2,h1{
color: white;
padding-left: 2%;
font-size: 18px;
border-left:5px solid #e8770c;
}
.hidd{
color: white;
padding-left: 2%;
font-size: 18px;
border-left:5px solid #e8770c;
}
.foot span {
font-size: 16px;
margin-right: 1%;
text-align: justify;
color: white;
}
.foot .cont{
font-size: 12px;
padding-left: 1%;
color: white;
}
.foot .locat {
margin-top: 0.75%;
width: 5%;
}
.foot .phone{
width: 5%;
}
.foot .mob{
width: 4%;
}
.foot .soc{
margin-left: -10%;
}
.foot .menf{
margin-left: -2%;
display: inline-block;
}
.foot .menf ul{
display: inline-block;
}
.foot .menf li{
margin-left: 10px;
display: inline-block;
font-weight: bold;
font-size: 14px;
color: white;
}
.foot input{
margin-left: 20%;
margin-top: 1%;
width: 60%;
padding-top: 0.5%;
padding-bottom: 0.5%;
padding-left: 3%;
border-radius: 10px;
outline: none;
}
.foot .new{
margin-left: 64%;
border-radius: 10px;
width: 20%;
color: white;
background-color: #e8770c;
border-color: #e8770c;
outline: none;
font-weight: bold;
padding: 1%;
}
.foot h3{
font-size: 16px;
color: white;
}
.foot a{
color: white;
}
.copy{
width: auto;
}
.copy th{
padding-top: 1%;
color: white;
background: linear-gradient( to top right, #2b76b9 40%, #0588BC);
}
}
/*****************************CSS Desktop + Ipad 800px --> 1224px*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/************CSS MOBILE Orientation Portrait : 1024 min width ****************************************/
@media (min-width:1024px) and (max-width:1224px) {
html {
width: 100%;
background-color:red;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.cachecache{
display: none;
}
body {
width: 99%;
color:#6f6f6f;
position:absolute;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
tr.hover1:hover {
background-color:#e6e3e3;
}
a.lien {
color:black;
}
.feet{
display: none;
}
.hidi{
display: initial;
color: white;
}
header{
width: device-width;
background: linear-gradient( to bottom right, #2b76b9 30%, white);
margin-top: -0.5em;
}
header .logo{
width: 60%;
margin-top: 2%;
margin-left: -10%;
margin-bottom: 1%;
}
.inscription{
margin-top: 4%;
margin-left: 13%;
padding: 1%;
width: 75%;
color: black;
font-weight: bold;
background-color: white;
border:1px solid #00a0e3;
border-radius: 10px;
}
.inscription td{
padding: 0.25%;
padding-right: 0.25%;
}
.inscription th{
margin-left: -15%;
background-color: #125688;
border-radius: 10px;
padding: 1%;
margin-left: -1%;
width: 100%;
font-size: 18px;
color:white;
}
.inscription .infop th{
margin-left: -15%;
border-radius: 10px;
padding: 1%;
margin-left: -1%;
width: 100%;
font-size: 16px;
color:white;
}
.inscription input{
border:1px solid #00a0e3;
border-radius: 10px;
width: 50%;
height: 35px;
padding-left: 1%;
outline: none;
}
.inscription select{
border:1px solid #00a0e3;
width: 100%;
height: 35px;
padding: 0.25%;
border-radius: 10px;
margin-bottom :2em;
}
.inscription .tit{
border:1px solid #00a0e3;
width: 5%;
color: black;
height: 12px;
outline: none;
}
.inscription .tit label{
font-weight: bold;
font-size: 18px;
color: black;
}
.confirmation button{
margin-top: 1%;
font-weight: bold;
background-color: #00a0e3;
border-color:#00a0e3;
border-radius: 10px;
color: white;
width: 10%;
outline: none;
}
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #4AB2D6;
width: 10%;
min-height: 920px;
margin-left: 2%;
margin-top:2%;
border-top-left-radius: 10px;
}
/* Style the buttons that are used to open the tab content */
.tab button {
display: block;
background-color: #4AB2D6;
color: white;
font-weight: bold;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
width: 100%;
margin-top: 10%;
margin-left:15%;
color: #2b76b9;
font-weight: bold;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
border-top-right-radius: -10%;
height: 120px;
background-color: white;
}
/*Recherche*/
/* Style the tab content */
.tabcontent {
margin-top: 2%;
margin-bottom: 2%;
margin-right: 4% !important;
float: right;
padding: 0px 12px;
border-radius: 10px;
border: 1px solid #ccc;
background-color: white;
width: 81%;
border-left: none;
min-height: 920px;
}
.tabcontet {
margin-top: 2%;
margin-bottom: 2%;
margin-left: auto;
margin-right: auto;
padding: 0px 12px;
border-radius: 10px;
border: 1px solid #ccc;
background-color: white;
width: 80%;
border-left: none;
}
.tab .icon{
width: 85%;
margin-left: 5%;
background-image: url(img/appel.png);
}
.tab .icon2{
margin-top: -2%;
width: 60%;
margin-left: 10%;
background-image: url(img/appel.png);
}
.sercli{
width: 71%;
margin-top: 2%;
margin-left: 15%;
margin-right: 10%;
box-shadow: 5px -3px 10px grey;
border-radius: 5px;
}
.badge1 {
position:relative;
border-radius: 10px;
background-color: #7BC342;
border-color: #7BC342;
border-style: solid;
outline: none;
}
.badge1[data-badge]:after {
content:attr(data-badge);
position:absolute;
top:-10px;
right:-10px;
font-size:1em;
background:red;
color:white;
width:18px;height:18px;
text-align:center;
line-height:18px;
border-radius:50%;
box-shadow:0 0 1px #333;
}
.favo{
display: block;
cursor: pointer;
margin: auto;
width: 56%;
height:80%;
}
.head{
position: absolute;
width: 101%;
margin-right: auto;
margin-left: auto;
height: 100px;
position: top;
background-size:cover;
background: linear-gradient( to bottom right, #2b76b9 30%, white);
}
.icon{
margin-right:2%;
width: 80%;
float: right;
border-radius: 10px;
border-color: #2b76b9;
}
.welcome{
margin-top: -2%;
font-size: 18px;
font-family: 'Lato';
color: white;
}
.mobilemenu{
display: none;
}
.menu {
margin-left: -30%;
}
.menu ul{
display: block;
}
.menu li{
padding: 2%;
letter-spacing: 1px;
font-size: 16px;
font-weight: bold;
color: white;
display: inline-block;
border-radius: 10px;
}
.menu li:hover{
background-color: #6CCB17;
}
.menu li.active{
background-color: #7BC342;
border-left: 2px solid orange;
}
.social{
float: right;
margin-top: -8%;
margin-right: 25%;
}
.client{
width: 50%;
height: 45px;
padding-top: 0.25px;
display: inline-block;
float: right;
font-weight: bold;
color: white;
border-radius: 10px;
background-color: #125688;
border-color: #125688;
}
.client:hover{
cursor: pointer;
}
.client a{
width: 100%;
height: 100%;
}
.client:focus {outline:0;}
.esp{
margin-top: -12%;
margin-right: 26%;
}
.lang{
width: 13%;
position: relative;
height: 20px;
padding-left: 2px;
float: right;
font:bold 13px 'Palanquin';
color: white;
background-color: white;
margin-left: 2%;
border-radius: 10px;
background-color: #125688;
border-color: #125688
}
.lang:focus {outline:0;}
.lang:hover{
cursor: pointer;
}
.logo{
margin-top: -2%;
width: 30%;
}
.bfavo{
padding: 2%;
margin-left: -3%;
margin-right: 1%;
outline: none;
color: white;
font-family: 'Lato';
font-size: 16px;
background-color: #7BC342;
border-color: #7BC342;
border-radius: 10px;
}
.offre{
width: 70%;
margin-top: 10%;
padding: 2%;
background-color: white;
border-radius: 10px;
margin-left: 16%;
}
.offre th{
background-color:#2b76b9 ;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
padding: 1%;
color: white;
}
.offre .tyype{
width: 30%;
padding: 2%;
margin-top: -3%;
margin-right: 2%;
border-radius: 20px;
border-top-left-radius: 0;
background-color: #F8F8FF;
}
.tyype th{
color: black;
}
.tyype td{
color: black;
}
.tyype ul{
margin-top: 3%;
list-style-type: none;
}
.tyype ul li{
color: black;
padding: 2%;
}
.tyype li:hover{
background-color: #7BC342;
color: white;
border-radius: 10px;
}
.offre .resum {
width: 100%;
border-collapse: collapse;
}
.offre .resum td{
font-size: 16px !important;
}
.offre span{
font-size: 18px;
color: black;
display:initial;
}
.resum td{
color: black;
padding: 1%;
}
.resum th{
background-color:#2b76b9 ;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
padding: 1%;
color: white;
}
.resum .mont{
font-weight: bold;
font-size: 18px;
color: #7BC342;
}
.recherche{
margin-top: 3%;
margin-left: auto;
margin-right: auto;
width:90%;
padding: 1%;
padding-bottom: 2%;
border-spacing: 0.5px;
border-radius: 10px;
}
.recherche th{
background-color: #7BC342;
padding: 1%;
color: white;
letter-spacing: 1.5px;
font-weight: bold;
font-size: 18px;
border-collapse: collapse;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.recherche input{
width: 95%;
border-radius: 10px;
border-color: #00a0e3;
padding:1%;
}
.recherche input:focus{
outline: none;
}
.recherche td{
padding: 0.25%;
}
.recherche select{
width: 95%;
border-radius: 10px;
border-color: #00a0e3;
padding:1%;
}
.recehrche label{
padding: 1%;
}
.recherche input{
border:1px solid #2b76b9;
}
.recherche .submit{
width: 22%;
height: 40px;
color: #fff;
font-weight: 900;
border-radius: 10px;
background-color: #7BC342 ;
border-color: #7BC342 ;
outline: none;
border-style: solid;
}
.sticky-container{
padding:0px;
margin:0px;
position:fixed;
right:-130px;
top:525px;
width:210px;
z-index: 1100;
}
.sticky li{
list-style-type:none;
background-color:#125688;
color:#efefef;
height:43px;
padding:0px;
margin:0px 0px 1px 0px;
-webkit-transition:all 0.25s ease-in-out;
-moz-transition:all 0.25s ease-in-out;
-o-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
cursor:pointer;
}
.sticky li:hover{
margin-left:-115px;
}
.sticky li img{
float:left;
margin:5px 4px;
margin-right:5px;
}
.sticky li p{
padding-top:5px;
margin:0px;
line-height:16px;
font-size:11px;
}
.sticky li p a{
text-decoration:none;
color:white;
font-weight: bold;
}
.sticky li p a:hover{
text-decoration:underline;
}
.sector {
margin-top: 1%;
background-color: #4AB2D6 ;
border-color: #4AB2D6 ;
padding: 1%;
border-radius: 10px;
color: white;
font-size: 16px;
text-align: left;
font-weight: bold;
outline: none
}
.sector option{
width:40%;
}
.sectorr{
margin-top: 1%;
background-color: #7BC342 ;
border-color: #7BC342 ;
padding: 1%;
border-radius: 10px;
color: white;
font-size: 14px;
font-weight: bold;
outline: none;
border-style: solid;
}
.topp{
width: 80%;
margin-top: 10%;
margin-left: auto;
margin-right: auto;
padding: 1%;
background-color: #EFF0F0;
}
.sider{
width: 90%;
background-color: white;
color: black;
padding: 2%;
font-size: 16px;
border:2px solid #125688;
border-radius: 10px;
}
.sider th{
background-color: #2b76b9;
}
.appel{
width: 100%;
border: 2px solid rgba(225, 229, 234, 0.52);
padding: 0.2em;
color:black;
font-size: 18px;
}
.appel .det {
width:100% ;
display:block;
margin:auto;
}
/*.appel tr:nth-child(odd) { background-color:red; }
.appel tr:nth-child(even) { background-color:green; }*/
.appel tr{
width:100%;
padding: 1%;
}
.appel th{
border-bottom: 5px solid #e8770c;
color: #125688;
padding: 1%;
font-size: 12px;
font-weight: bold;
}
.appel td{
padding: 4px;
border: 0.1px solid #e8e8e8;
color: black;
font-size: 14px;
/*border-bottom: 1px solid black;
border: 1px dotted black;*/
}
.map{
margin-left: 2.5%;
margin-top: 10%;
}
.map td{
padding: 5%;
}
.map iframe{
padding: 1%;
box-shadow: 0px -10px 0px 0px 30px grey;
}
.contact{
float: right;
width: 40%;
padding-top: 2%;
padding-left: 2%;
padding-bottom: 2%;
box-shadow: 3px 2px 30px grey;
margin-right: 10%;
margin-top: 11%;
background-color: white;
border:1px solid black;
border-radius: 5px;
}
.contact th{
padding-bottom: 2%;
font-weight: bold;
text-decoration: underline;
font-size: 18px;
color: black;
}
.contact tr{
}
.contact td{
font-weight: bold;
font-size: 16px;
color: black;
align-content: left;
border-spacing: 10px;
}
.contact input{
width: 85%;
padding: 1%;
border-radius: 5px;
border:1px solid #00a0e3;
}
.contact button{
background-color: #125688;
border-color: #125688;
border-radius: 10px;
width: 50%;
color: white;
padding: 1%;
font-weight: bold;
margin-top: 10%;
margin-left: 80%;
}
.contact textarea{
width: 85%;
height: 150px;
}
.info{
width: 30%;
margin-top: 12%;
margin-left: 10%;
float: left;
background-color: white;
border:1px solid black;
border-radius: 5px;
box-shadow: 2px -3px 20px grey;
}
.info th{
color:black;
font-weight: bold;
text-decoration: underline;
padding:2%;
}
.info td{
color:black;
padding: 2%;
padding-left: 5%;
}
.info td span{
color: black;
font-size: 18px;
}
.info a{
font-weight: bold;
font-size: 18px;
}
.info h3{
font-size: 18px;
}
.map{
margin-top: 10%;
}
.map td{
padding: 5%;
}
.map iframe{
padding: 1%;
box-shadow: 0px -10px 0px 0px 30px grey;
}
.presenta{
width: 90%;
margin-left: 5%;
margin-top: 15%;
border-collapse: collapse;
}
.presenta tr:nth-child(odd){
background-color: #E6E6FA;
}
.presenta .cone{
width: 90%;
height: 300px;
}
.presenta .para{
width: 70%;
margin-top: -5%;
margin-left: 15%;
text-align: justify;
color: #125688;
font-weight: bold;
font-size: 16px;
}
.presenta .parag{
width: 70%;
margin-top: -5%;
margin-left: 15%;
text-align: justify;
color: #125688;
line-height: 1.5em;
font-weight: bold;
font-size: 16px;
}
.presenta .parag a{
color: #125688;
font-size: 18px;
font-weight: bold;
}
.presenta li{
padding: 1%;
}
.detail{
width: 60%;
margin-top: 14%;
margin-left: 20%;
border-radius: 10px;
border-collapse: collapse;
background-color:white;
}
.entreprise{
width: 85%;
margin-top: 12%;
margin-left: 7.5%;
padding:2%;
border-radius: 10px;
box-shadow: 2px 3px 20px grey;
text-align: justify;
background-color: white;
color: #2b76b9;
font-size: 16px;
font-weight: bold;
}
.deska{
width: 80%;
height: 250px;
margin-left: 15%;
}
.entreprise th{
color: black;
padding-left: -50%;
margin-left: -10%;
border-left:5px solid orange;
}
.tarif{
width: 85%;
margin-top: 1%;
border-radius: 10px;
box-shadow: 2px -3px 20px grey;
background-color: white;
margin-left: 7.5%;
}
.tarif th{
border-left: 5px solid orange;
font-size: 18px;
color: #125688;
padding: 2%;
}
.tarif .apoff{
width: 80%;
margin-left: 7%;
border-spacing: 10px;
}
.apoff th{
border-left: none;
}
.apoff .titre{
border-radius: 10px;
background: linear-gradient( to right, #DCDCDC 60%, white);
}
.apoff .yellow{
background-color: orange;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-bottom: 0.5%;
padding: 1px;
width: 30%;
}
.apoff h2{
color: black;
text-shadow: 2px 1px 5px white;
font-size: 22px;
}
.apoff .blue{
background-color: #125688;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 1px;
padding-bottom: 1%;
width: 30%;
}
.apoff .tit{
color: white;
text-shadow: none;
font-size: 22px;
}
.apoff .desc{
width: 100%;
margin-left: 4%;
border-bottom-left-radius: 10px;
color: black;
background-color: white;
}
.prix{
width: 65%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 22px;
font-weight: bold;
text-shadow: 1px 1px 10px black;
margin-left: 22%;
background-color: #96ba48;
border-bottom-left-radius:10px;
}
.comm{
width: 50%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 16px;
font-weight: bold;
border-color: orange;
outline: none;
text-shadow: 1px 1px 10px orange;
margin-left: 41.5%;
background-color: orange;
border-top-left-radius:10px;
border-bottom-right-radius: 5px;
}
.comm2{
width: 50%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 16px;
font-weight: bold;
border-color: #125688;
outline: none;
text-shadow: 1px 1px 10px #125688;
margin-left: 43%;
background-color: #125688;
border-top-left-radius:10px;
border-bottom-right-radius: 5px;
}
.comm3{
width: 60%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 12px;
font-weight: bold;
border-color: #125688;
outline: none;
text-shadow: 1px 1px 10px #125688;
margin-left: 33%;
background-color: #125688;
border-top-left-radius:10px;
border-bottom-right-radius: 5px;
}
.descr{
width: 100%;
margin-left: 4%;
border-bottom-left-radius: 10px;
color: black;
font-size: 16px;
font-weight: bold;
background-color: white;
}
.tarif .servad{
width: 80%;
margin-top: 2%;
margin-left: 7%;
border-spacing: 10px;
border-radius: 10px;
background-color: white;
}
.servad td{
border-left: none;
}
.servad th{
border-radius: 10px;
padding: 1%;
border-left: none;
background: linear-gradient( to right, #DCDCDC 60%, white);
}
.servad .titr{
color: white;
text-shadow: none;
font-size: 16px;
}
.servad .blu{
background-color: #125688;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 1px;
padding-bottom: 1%;
width: 30%;
}
.servad .suivre{
width: 90%;
padding: 3%;
border-radius: 10px;
background-color: white;
}
.suivre li{
color: black;
line-height: 2em;
font-size: 16px;
font-weight: bold;
list-style-type: none;
margin-left: -20%;
}
.servad .pri{
color: white;
margin-top: 2%;
padding: 2%;
font-size: 32px;
font-weight: bold;
}
.banpub{
width: 85%;
margin-top: 2%;
margin-left: 7.5%;
border-spacing: 10px;
padding: 2%;
border-radius: 10px;
text-align: justify;
box-shadow: 2px 3px 20px grey;
background-color: white;
}
.banpub th{
border-left: 5px solid orange;
font-size: 18px;
color: #125688;
padding: 1%;
}
.banpub .descri{
color: black;
padding: 5%;
font-size: 16px;
}
.banpub .pub{
border-collapse: collapse;
width: 80%;
margin-left: 7.5%;
padding: 1%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #125688;
}
.pub th{
color: white;
border-left: none;
}
.pub .banni{
width: 99.75%;
margin-left: 0.5%;
border-collapse: collapse;
background-color: white;
}
.pub .comma{
float: right;
color: white;
font-size: 18px;
margin-top: -3%;
margin-right: -0.25%;
height: 30px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-color: #125688;
background-color: #125688;
width: 20%;
}
.banni td{
color: black;
font-size: 18px;
font-weight: bold;
padding: 2%;
}
.banni li{
color: #125688;
margin:2%;
}
.detail th{
background-color: #2b76b9;
border-radius: 10px;
padding:1%;
color:white;
font-size: 18px;
font-weight: bold;
}
.detail td{
color: black;
font-size: 18px;
padding: 0.5%;
padding-left: 3%;
}
.detail .montant{
width: 80%;
background-color: #2b76b9;
color: white;
font-size: 16px;
margin:1%;
border:3px ridge #e8770c;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 90% 100%, 75% 0);
}
.annonceur{
width: 60%;
margin-top: 1%;
margin-left: 20%;
border-radius: 10px;
background-color:white;
}
.annonceur td{
color: black;
font-size: 16px;
font-weight: bold;
padding: 1%;
padding-left: 3%;
}
.annonceur th{
background-color: #2b76b9;
border-radius: 10px;
padding:1%;
color:white;
font-size: 18px;
font-weight: bold;
}
.annonceur button{
width: 10%;
padding: 1%;
border-radius: 10px;
background-color: #00a0e3;
color: white;
font-weight: bold;
}
.capture{
width: 70%;
margin-top: 1%;
margin-left: 16%;
border-radius: 10px;
background-color:white;
padding-bottom: 2%;
}
.capture th{
background-color: #2b76b9;
border-radius: 10px;
padding:1%;
color:white;
font-size: 18px;
font-weight: bold;
}
.capture td{
color: black;
font-size: 16px;
font-weight: bold;
padding: 1%;
padding-left: 3%;
}
.capture tr{
padding-right: 2%;
padding-left: 2%;
}
.capture .source{
width: 25%;
padding-left: 1%;
font-size: 16px;
font-weight: bold;
background-color: #2b76b9;
color: white;
font-size: 14px;
margin:1%;
font-weight: bold;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 90% 100%, 75% 0);
}
.capture .zonecap{
width: 60%;
margin-left: 10%;
padding-right: 3%;
cursor: zoom-in;
}
.favo{
margin: auto;
margin-top: 10%;
margin-bottom: 2%;
width: 75%;
background-color: white;
color:white;
border-radius: 10px;
}
.favo th{
width: 15%;
font-weight: bold;
padding: 1%;
border-radius: 10px;
font-size: 16px;
background-color: #125688;
border-bottom: 2px solid orange;
}
.favo .titre{
background-color: white;
color:black;
}
.favo td{
color: black;
padding: 0.5%;
padding-left: 1.5em;
}
.favor{
margin: auto;
margin-top: 2%;
margin-bottom: 2%;
width: 75%;
background-color: white;
color:white;
border-radius: 10px;
}
.favor th{
width: 15%;
font-weight: bold;
padding: 1%;
border-radius: 10px;
font-size: 16px;
background-color: #125688;
border-bottom: 2px solid orange;
}
.favor .titre{
background-color: white;
color:black;
}
.favor td{
color: black;
padding: 0.5%;
padding-left: 1.5em;
}
.back input{
background-color: #125688;
border-color: #125688;
border-radius: 10px;
outline: none;
color: white;
height: 30px;
margin-left: 3em;
margin-top:7em;
}
.archive{
margin-top: 3%;
width:80%;
background-color: white;
border-radius: 10px;
padding-bottom: 2%;
}
.archive th{
background-color: #2b76b9;
padding: 1%;
color: white;
letter-spacing: 0.5px;
font-weight: bold;
font-size: 16px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.archive input{
width: 90%;
border-radius: 10px;
border-color: #00a0e3;
padding:1%;
}
.archive input:focus{
outline: none;
}
.archive td{
width: 20%;
}
.archive .wilaya{
width: 95%;
border-radius: 10px;
border-color: #2b76b9;
margin-left: 12%;
padding:2%;
}
.archive .wilaya:focus{
outline: none;}
.archive .secteur{
width: 95%;
border-radius: 10px;
border-color: #2b76b9;
margin-left: 7%;
padding:2%;
}
.archive .secteur:focus{
outline: none;}
.archive .rech{
width: 85%;
margin-left: 3%;
color: white;
letter-spacing: 0.5px;
font-weight: bold;
font-size:16px;
border-radius: 10px;
padding: 2%;
background-color: #2b76b9;
border-color: #2b76b9;
}
.archive .rech:focus{
outline: none;
}
.archive .type{
width: 86%;
border-radius: 10px;
border-color: #2b76b9;
margin-left: -9%;
padding:2%;
}
.archive .type:focus{
outline: none
}
.archive .titre{
width: 90%;
padding: 2%;
margin-left: 12%;
}
.archive .titre:focus{
outline: none
}
.archive .organ{
width: 90%;
padding: 2%;
margin-left: 7%;
}
.archive .organ:focus{
outline: none
}
.archive .source{
width: 80.5%;
margin-left: 2.5%;
padding: 2%;
}
.archive .source:focus{
outline: none
}
.archive .datep{
width: 50%;
margin-left: 29%;
padding: 2%;
padding-left: 10%;
}
.archive .datep:focus{
outline: none
}
.archive .datee{
width: 60%;
margin-left: 21%;
padding: 2%;
padding-left: 10%;
}
.archive .datep:focus{
outline: none
}
.foot{
margin-top: 1%;
margin-bottom: -1%;
width: 101%;
background: linear-gradient( to top right, #2b76b9 40%, #0588BC);
padding-bottom: 1%;
line-height: 1.25em;
}
.foot th{
height: 20px;
}
.foot .logoo{
margin-top: 2%;
width: 80%;
}
.foot .logo img{
width: 40%;
}
.foot h2{
color: white;
padding-left: 2%;
font-size: 18px;
border-left:5px solid #e8770c;
}
.foot span {
font-size: 16px;
margin-right: 1%;
text-align: justify;
color: white;
}
.foot .cont{
font-size: 12px;
padding-left: 1%;
color: white;
}
.foot .locat {
margin-top: 0.75%;
width: 5%;
}
.foot .phone{
width: 5%;
}
.foot .mob{
width: 4%;
}
.foot .soc{
margin-left: -10%;
}
.foot .menf{
margin-left: -2%;
display: inline-block;
}
.foot .menf ul{
display: inline-block;
}
.foot .menf li{
margin-left: 10px;
display: inline-block;
font-weight: bold;
font-size: 14px;
color: white;
}
.foot input{
margin-left: 20%;
margin-top: 1%;
width: 60%;
padding-top: 0.5%;
padding-bottom: 0.5%;
padding-left: 3%;
border-radius: 10px;
outline: none;
}
.foot .new{
margin-left: 64%;
border-radius: 10px;
width: 20%;
color: white;
background-color: #e8770c;
border-color: #e8770c;
outline: none;
font-weight: bold;
padding: 1%;
}
.foot h3{
font-size: 16px;
color: white;
}
.foot a{
color: white;
}
.copy{
width: 101%;
}
.copy th{
padding-top: 1%;
color: white;
background: linear-gradient( to top right, #2b76b9 40%, #0588BC);
}
}
/*****************************CSS Desktop + Ipad 800px --> 1224px*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/************CSS MOBILE Orientation Portrait : 320 min width ****************************************/
@media only screen and (min-width:801px) and (max-width:1023px) {
html {
width: 100%;
background-color:red;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
body {
width: 99%;
color:#6f6f6f;
position:absolute;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.feet{
display: none;
}
.hidi{
display: initial;
color: white;
}
.inscription{
margin-top: 4%;
margin-left: 13%;
padding: 1%;
width: 75%;
color: black;
font-weight: bold;
background-color: white;
border:1px solid #00a0e3;
border-radius: 10px;
}
.mobilemenu{
display: none;
}
.menu {
margin-right: -30%;
}
.menu ul{
display: block;
}
.menu li{
padding: 2%;
letter-spacing: 1px;
font-size: 12px;
font-weight: bold;
color: white;
display: inline-block;
border-radius: 10px;
}
.menu li:hover{
background-color: #6CCB17;
}
.menu li.active{
background-color: #7BC342;
border-left: 2px solid orange;
}
.inscription td{
padding: 0.25%;
padding-right: 0.25%;
}
.inscription th{
margin-left: -15%;
background-color: #125688;
border-radius: 10px;
padding: 1%;
margin-left: -1%;
width: 100%;
font-size: 18px;
color:white;
}
.inscription .infop th{
margin-left: -15%;
border-radius: 10px;
padding: 1%;
margin-left: -1%;
width: 100%;
font-size: 16px;
color:white;
}
.inscription input{
border:1px solid #00a0e3;
border-radius: 10px;
width: 50%;
height: 35px;
padding-left: 1%;
outline: none;
}
.inscription select{
border:1px solid #00a0e3;
width: 100%;
height: 35px;
padding: 0.25%;
border-radius: 10px;
margin-bottom :2em;
}
.inscription .tit{
border:1px solid #00a0e3;
width: 5%;
color: black;
height: 12px;
outline: none;
}
.inscription .tit label{
font-weight: bold;
font-size: 18px;
color: black;
}
.confirmation button{
margin-top: 1%;
font-weight: bold;
background-color: #00a0e3;
border-color:#00a0e3;
border-radius: 10px;
color: white;
width: 10%;
outline: none;
}
.sercli{
width: 71%;
margin-top: 2%;
margin-left: 15%;
margin-right: 10%;
box-shadow: 5px -3px 10px grey;
border-radius: 5px;
}
header{
width: device-width;
background: linear-gradient( to bottom right, #2b76b9 30%, white);
margin-top: -0.5em;
}
header .logo{
width: 60%;
margin-top: 2%;
margin-left: -10%;
margin-bottom: 1%;
}
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #4AB2D6;
width: 10%;
min-height: 920px;
margin-left: 2
1%;
margin-top:2%;
border-top-left-radius: 10px;
}
/* Style the buttons that are used to open the tab content */
.tab button {
display: block;
background-color: #4AB2D6;
color: white;
font-weight: bold;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
width: 100%;
margin-top: 10%;
margin-left:15%;
color: #2b76b9;
font-weight: bold;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
border-top-right-radius: -10%;
height: 120px;
background-color: white;
}
/*Recherche*/
/* Style the tab content */
.tabcontent {
margin-top: 2%;
margin-bottom: 2%;
margin-right: 4% !important;
float: right;
padding: 0px 12px;
border-radius: 10px;
border: 1px solid #ccc;
background-color: white;
width: 95%;
border-left: none;
min-height: 920px;
}
.tabcontet {
margin-top: 2%;
margin-bottom: 2%;
margin-left: auto;
margin-right: auto;
padding: 0px 12px;
border-radius: 10px;
border: 1px solid #ccc;
background-color: white;
width: 80%;
border-left: none;
}
.tab .icon{
width: 85%;
margin-left: 5%;
background-image: url(img/appel.png);
}
.tab .icon2{
margin-top: -2%;
width: 60%;
margin-left: 10%;
background-image: url(img/appel.png);
}
.badge1 {
position:relative;
border-radius: 10px;
background-color: #7BC342;
border-color: #7BC342;
border-style: solid;
outline: none;
}
.badge1[data-badge]:after {
content:attr(data-badge);
position:absolute;
top:-10px;
right:-10px;
font-size:1em;
background:red;
color:white;
width:18px;height:18px;
text-align:center;
line-height:18px;
border-radius:50%;
box-shadow:0 0 1px #333;
}
.favo{
display: block;
cursor: pointer;
margin: auto;
width: 56%;
height:80%;
}
.head{
position: absolute;
width: 101%;
margin-right: auto;
margin-left: auto;
height: 100px;
position: top;
background-size:cover;
background: linear-gradient( to bottom right, #2b76b9 30%, white);
}
.icon{
margin-right:2%;
width: 25%;
float: right;
border-radius: 10px;
border-color: #2b76b9;
}
.welcome{
margin-top: -2%;
font-size: 18px;
font-family: 'Lato';
color: white;
}
.social{
float: right;
margin-top: -8%;
margin-right: 25%;
}
.client{
width: 50%;
height: 45px;
padding-top: 0.25px;
display: inline-block;
float: right;
font-weight: bold;
color: white;
border-radius: 10px;
background-color: #125688;
border-color: #125688;
}
.client:hover{
cursor: pointer;
}
.client a{
width: 100%;
height: 100%;
}
.client:focus {outline:0;}
.esp{
margin-top: -12%;
margin-right: 26%;
}
.lang{
width: 13%;
position: relative;
height: 20px;
padding-left: 2px;
float: right;
font:bold 13px 'Palanquin';
color: white;
background-color: white;
margin-left: 2%;
border-radius: 10px;
background-color: #125688;
border-color: #125688
}
.lang:focus {outline:0;}
.lang:hover{
cursor: pointer;
}
.logo{
margin-top: -2%;
width: 40%;
}
.bfavo{
padding: 2%;
margin-left: -3%;
margin-right: 1%;
outline: none;
color: white;
font-family: 'Lato';
font-size: 16px;
background-color: #7BC342;
border-color: #7BC342;
border-radius: 10px;
}
.offre{
width: 70%;
margin-top: 10%;
padding: 2%;
background-color: white;
border-radius: 10px;
margin-left: 16%;
}
.offre th{
background-color:#2b76b9 ;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
padding: 1%;
color: white;
}
.offre .tyype{
width: 30%;
padding: 2%;
margin-top: -3%;
margin-right: 2%;
border-radius: 20px;
border-top-left-radius: 0;
background-color: #F8F8FF;
}
.tyype th{
color: black;
}
.tyype td{
color: black;
}
.tyype ul{
margin-top: 3%;
list-style-type: none;
}
.tyype ul li{
color: black;
padding: 2%;
}
.tyype li:hover{
background-color: #7BC342;
color: white;
border-radius: 10px;
}
.offre .resum {
width: 100%;
border-collapse: collapse;
}
.offre .resum td{
font-size: 16px !important;
}
.offre span{
font-size: 18px;
color: black;
display:initial;
}
.resum td{
color: black;
padding: 1%;
}
.resum th{
background-color:#2b76b9 ;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
padding: 1%;
color: white;
}
.resum .mont{
font-weight: bold;
font-size: 18px;
color: #7BC342;
}
.recherche{
margin-top: 2%;
margin-left: auto;
margin-right: auto;
width:90%;
padding: 1%;
padding-bottom: 2%;
border-spacing: 0.5px;
border-radius: 10px;
}
.recherche th{
background-color: #7BC342;
padding: 1%;
color: white;
letter-spacing: 1.5px;
font-weight: bold;
font-size: 18px;
border-collapse: collapse;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.recherche input{
width: 95%;
border-radius: 10px;
border-color: #00a0e3;
padding:1%;
}
.recherche input:focus{
outline: none;
}
.recherche td{
padding: 0.25%;
}
.recherche select{
width: 95%;
border-radius: 10px;
border-color: #00a0e3;
padding:1%;
}
.recehrche label{
padding: 1%;
}
.recherche input{
border:1px solid #2b76b9;
}
.recherche .submit{
width: 22%;
height: 40px;
color: #fff;
font-weight: 900;
border-radius: 10px;
background-color: #7BC342 ;
border-color: #7BC342 ;
outline: none;
border-style: solid;
}
.sticky-container{
padding:0px;
margin:0px;
position:fixed;
right:-130px;
top:525px;
width:210px;
z-index: 1100;
}
.sticky li{
list-style-type:none;
background-color:#125688;
color:#efefef;
height:43px;
padding:0px;
margin:0px 0px 1px 0px;
-webkit-transition:all 0.25s ease-in-out;
-moz-transition:all 0.25s ease-in-out;
-o-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
cursor:pointer;
}
.sticky li:hover{
margin-left:-115px;
}
.sticky li img{
float:left;
margin:5px 4px;
margin-right:5px;
}
.sticky li p{
padding-top:5px;
margin:0px;
line-height:16px;
font-size:11px;
}
.sticky li p a{
text-decoration:none;
color:white;
font-weight: bold;
}
.sticky li p a:hover{
text-decoration:underline;
}
.sector {
margin-top: 1%;
background-color: #4AB2D6 ;
border-color: #4AB2D6 ;
padding: 1%;
border-radius: 10px;
color: white;
font-size: 16px;
font-weight: bold;
outline: none
}
.sector option{
width:70%;
}
.sectorr{
margin-top: 1%;
background-color: #7BC342 ;
border-color: #7BC342 ;
padding: 1%;
border-radius: 10px;
color: white;
font-size: 14px;
font-weight: bold;
outline: none;
border-style: solid;
}
.topp{
width: 80%;
margin-top: 12%;
margin-left: auto;
margin-right: auto;
padding: 1%;
background-color: #EFF0F0;
}
.sider{
width: 90%;
background-color: white;
color: black;
padding: 2%;
font-size: 16px;
border:2px solid #125688;
border-radius: 10px;
}
.sider th{
background-color: #2b76b9;
}
/* Create an active/current "tab button" class */
.appel{
width: 100%;
border: 2px solid rgba(225, 229, 234, 0.52);
padding: 0.2em;
color:black;
font-size: 18px;
}
.appel .det {
width:100% ;
display:block;
margin:auto;
}
/*.appel tr:nth-child(odd) { background-color:red; }
.appel tr:nth-child(even) { background-color:green; }*/
.appel tr{
width:100%;
padding: 1%;
}
.appel th{
border-bottom: 5px solid #e8770c;
color: #125688;
padding: 1%;
font-size: 12px;
font-weight: bold;
}
.appel td{
padding: 4px;
border: 0.1px solid #e8e8e8;
color: black;
font-size: 14px;
/*border-bottom: 1px solid black;
border: 1px dotted black;*/
}
.map{
margin-left: 2.5%;
margin-top: 10%;
}
.map td{
padding: 5%;
}
.map iframe{
padding: 1%;
box-shadow: 0px -10px 0px 0px 30px grey;
}
.contact{
float: right;
width: 40%;
padding-top: 2%;
padding-left: 2%;
padding-bottom: 2%;
box-shadow: 3px 2px 30px grey;
margin-right: 10%;
margin-top: 11%;
background-color: white;
border:1px solid black;
border-radius: 5px;
}
.contact th{
padding-bottom: 2%;
font-weight: bold;
text-decoration: underline;
font-size: 18px;
color: black;
}
.contact tr{
}
.contact td{
font-weight: bold;
font-size: 16px;
color: black;
align-content: left;
border-spacing: 10px;
}
.contact input{
width: 85%;
padding: 1%;
border-radius: 5px;
border:1px solid #00a0e3;
}
.contact button{
background-color: #125688;
border-color: #125688;
border-radius: 10px;
width: 50%;
color: white;
padding: 1%;
font-weight: bold;
margin-top: 10%;
margin-left: 80%;
}
.contact textarea{
width: 85%;
height: 150px;
}
.info{
width: 30%;
margin-top: 12%;
margin-left: 10%;
float: left;
background-color: white;
border:1px solid black;
border-radius: 5px;
box-shadow: 2px -3px 20px grey;
}
.info th{
color:black;
font-weight: bold;
text-decoration: underline;
padding:2%;
}
.info td{
color:black;
padding: 2%;
padding-left: 5%;
}
.info td span{
color: black;
font-size: 18px;
}
.info a{
font-weight: bold;
font-size: 18px;
}
.info h3{
font-size: 18px;
}
.map{
margin-top: 10%;
}
.map td{
padding: 5%;
}
.map iframe{
padding: 1%;
box-shadow: 0px -10px 0px 0px 30px grey;
}
.presenta{
width: 90%;
margin-left: 5%;
margin-top: 15%;
border-collapse: collapse;
}
.presenta tr:nth-child(odd){
background-color: #E6E6FA;
}
.presenta .cone{
width: 90%;
height: 300px;
}
.presenta .para{
width: 70%;
margin-top: -5%;
margin-left: 15%;
text-align: justify;
color: #125688;
font-weight: bold;
font-size: 16px;
}
.presenta .parag{
width: 70%;
margin-top: -5%;
margin-left: 15%;
text-align: justify;
color: #125688;
line-height: 1.5em;
font-weight: bold;
font-size: 16px;
}
.presenta .parag a{
color: #125688;
font-size: 18px;
font-weight: bold;
}
.presenta li{
padding: 1%;
}
.detail{
width: 60%;
margin-top: 14%;
margin-left: 20%;
border-radius: 10px;
border-collapse: collapse;
background-color:white;
}
.entreprise{
width: 85%;
margin-top: 12%;
margin-left: 7.5%;
padding:2%;
border-radius: 10px;
box-shadow: 2px 3px 20px grey;
text-align: justify;
background-color: white;
color: #2b76b9;
font-size: 16px;
font-weight: bold;
}
.deska{
width: 80%;
height: 250px;
margin-left: 15%;
}
.entreprise th{
color: black;
padding-left: -50%;
margin-left: -10%;
border-left:5px solid orange;
}
.tarif{
width: 85%;
margin-top: 1%;
border-radius: 10px;
box-shadow: 2px -3px 20px grey;
background-color: white;
margin-left: 7.5%;
}
.tarif th{
border-left: 5px solid orange;
font-size: 18px;
color: #125688;
padding: 2%;
}
.tarif .apoff{
width: 80%;
margin-left: 7%;
border-spacing: 10px;
}
.apoff th{
border-left: none;
}
.apoff .titre{
border-radius: 10px;
background: linear-gradient( to right, #DCDCDC 60%, white);
}
.apoff .yellow{
background-color: orange;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-bottom: 0.5%;
padding: 1px;
width: 30%;
}
.apoff h2{
color: black;
text-shadow: 2px 1px 5px white;
font-size: 22px;
}
.apoff .blue{
background-color: #125688;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 1px;
padding-bottom: 1%;
width: 30%;
}
.apoff .tit{
color: white;
text-shadow: none;
font-size: 22px;
}
.apoff .desc{
width: 100%;
margin-left: 4%;
border-bottom-left-radius: 10px;
color: black;
background-color: white;
}
.prix{
width: 65%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 22px;
font-weight: bold;
text-shadow: 1px 1px 10px black;
margin-left: 22%;
background-color: #96ba48;
border-bottom-left-radius:10px;
}
.comm{
width: 50%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 16px;
font-weight: bold;
border-color: orange;
outline: none;
text-shadow: 1px 1px 10px orange;
margin-left: 41.5%;
background-color: orange;
border-top-left-radius:10px;
border-bottom-right-radius: 5px;
}
.comm2{
width: 50%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 16px;
font-weight: bold;
border-color: #125688;
outline: none;
text-shadow: 1px 1px 10px #125688;
margin-left: 43%;
background-color: #125688;
border-top-left-radius:10px;
border-bottom-right-radius: 5px;
}
.comm3{
width: 60%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 12px;
font-weight: bold;
border-color: #125688;
outline: none;
text-shadow: 1px 1px 10px #125688;
margin-left: 33%;
background-color: #125688;
border-top-left-radius:10px;
border-bottom-right-radius: 5px;
}
.descr{
width: 100%;
margin-left: 4%;
border-bottom-left-radius: 10px;
color: black;
font-size: 16px;
font-weight: bold;
background-color: white;
}
.tarif .servad{
width: 80%;
margin-top: 2%;
margin-left: 7%;
border-spacing: 10px;
border-radius: 10px;
background-color: white;
}
.servad td{
border-left: none;
}
.servad th{
border-radius: 10px;
padding: 1%;
border-left: none;
background: linear-gradient( to right, #DCDCDC 60%, white);
}
.servad .titr{
color: white;
text-shadow: none;
font-size: 16px;
}
.servad .blu{
background-color: #125688;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 1px;
padding-bottom: 1%;
width: 30%;
}
.servad .suivre{
width: 90%;
padding: 3%;
border-radius: 10px;
background-color: white;
}
.suivre li{
color: black;
line-height: 2em;
font-size: 16px;
font-weight: bold;
list-style-type: none;
margin-left: -20%;
}
.servad .pri{
color: white;
margin-top: 2%;
padding: 2%;
font-size: 32px;
font-weight: bold;
}
.banpub{
width: 85%;
margin-top: 2%;
margin-left: 7.5%;
border-spacing: 10px;
padding: 2%;
border-radius: 10px;
text-align: justify;
box-shadow: 2px 3px 20px grey;
background-color: white;
}
.banpub th{
border-left: 5px solid orange;
font-size: 18px;
color: #125688;
padding: 1%;
}
.banpub .descri{
color: black;
padding: 5%;
font-size: 16px;
}
.banpub .pub{
border-collapse: collapse;
width: 80%;
margin-left: 7.5%;
padding: 1%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #125688;
}
.pub th{
color: white;
border-left: none;
}
.pub .banni{
width: 99.75%;
margin-left: 0.5%;
border-collapse: collapse;
background-color: white;
}
.pub .comma{
float: right;
color: white;
font-size: 18px;
margin-top: -3%;
margin-right: -0.25%;
height: 30px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-color: #125688;
background-color: #125688;
width: 20%;
}
.banni td{
color: black;
font-size: 18px;
font-weight: bold;
padding: 2%;
}
.banni li{
color: #125688;
margin:2%;
}
.detail th{
background-color: #2b76b9;
border-radius: 10px;
padding:1%;
color:white;
font-size: 18px;
font-weight: bold;
}
.detail td{
color: black;
font-size: 18px;
padding: 0.5%;
padding-left: 3%;
}
.detail .montant{
width: 80%;
background-color: #2b76b9;
color: white;
font-size: 16px;
margin:1%;
border:3px ridge #e8770c;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 90% 100%, 75% 0);
}
.annonceur{
width: 60%;
margin-top: 1%;
margin-left: 20%;
border-radius: 10px;
background-color:white;
}
.annonceur td{
color: black;
font-size: 16px;
font-weight: bold;
padding: 1%;
padding-left: 3%;
}
.annonceur th{
background-color: #2b76b9;
border-radius: 10px;
padding:1%;
color:white;
font-size: 18px;
font-weight: bold;
}
.annonceur button{
width: 10%;
padding: 1%;
border-radius: 10px;
background-color: #00a0e3;
color: white;
font-weight: bold;
}
.capture{
width: 70%;
margin-top: 1%;
margin-left: 16%;
border-radius: 10px;
background-color:white;
padding-bottom: 2%;
}
.capture th{
background-color: #2b76b9;
border-radius: 10px;
padding:1%;
color:white;
font-size: 18px;
font-weight: bold;
}
.capture td{
color: black;
font-size: 16px;
font-weight: bold;
padding: 1%;
padding-left: 3%;
}
.capture tr{
padding-right: 2%;
padding-left: 2%;
}
.capture .source{
width: 25%;
padding-left: 1%;
font-size: 16px;
font-weight: bold;
background-color: #2b76b9;
color: white;
font-size: 14px;
margin:1%;
font-weight: bold;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 90% 100%, 75% 0);
}
.capture .zonecap{
width: 60%;
margin-left: 10%;
padding-right: 3%;
cursor: zoom-in;
}
.favo{
margin: auto;
margin-top: 10%;
margin-bottom: 2%;
width: 75%;
background-color: white;
color:white;
border-radius: 10px;
}
.favo th{
width: 15%;
font-weight: bold;
padding: 1%;
border-radius: 10px;
font-size: 16px;
background-color: #125688;
border-bottom: 2px solid orange;
}
.favo .titre{
background-color: white;
color:black;
}
.favo td{
color: black;
padding: 0.5%;
padding-left: 1.5em;
}
.favor{
margin: auto;
margin-top: 2%;
margin-bottom: 2%;
width: 75%;
background-color: white;
color:white;
border-radius: 10px;
}
.favor th{
width: 15%;
font-weight: bold;
padding: 1%;
border-radius: 10px;
font-size: 16px;
background-color: #125688;
border-bottom: 2px solid orange;
}
.favor .titre{
background-color: white;
color:black;
}
.favor td{
color: black;
padding: 0.5%;
padding-left: 1.5em;
}
.back input{
background-color: #125688;
border-color: #125688;
border-radius: 10px;
outline: none;
color: white;
height: 30px;
margin-left: 3em;
margin-top:7em;
}
.archive{
margin-top: 3%;
width:80%;
background-color: white;
border-radius: 10px;
padding-bottom: 2%;
}
.archive th{
background-color: #2b76b9;
padding: 1%;
color: white;
letter-spacing: 0.5px;
font-weight: bold;
font-size: 16px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.archive input{
width: 90%;
border-radius: 10px;
border-color: #00a0e3;
padding:1%;
}
.archive input:focus{
outline: none;
}
.archive td{
width: 20%;
}
.archive .wilaya{
width: 95%;
border-radius: 10px;
border-color: #2b76b9;
margin-left: 12%;
padding:2%;
}
.archive .wilaya:focus{
outline: none;}
.archive .secteur{
width: 95%;
border-radius: 10px;
border-color: #2b76b9;
margin-left: 7%;
padding:2%;
}
.archive .secteur:focus{
outline: none;}
.archive .rech{
width: 85%;
margin-left: 3%;
color: white;
letter-spacing: 0.5px;
font-weight: bold;
font-size:16px;
border-radius: 10px;
padding: 2%;
background-color: #2b76b9;
border-color: #2b76b9;
}
.archive .rech:focus{
outline: none;
}
.archive .type{
width: 86%;
border-radius: 10px;
border-color: #2b76b9;
margin-left: -9%;
padding:2%;
}
.archive .type:focus{
outline: none
}
.archive .titre{
width: 90%;
padding: 2%;
margin-left: 12%;
}
.archive .titre:focus{
outline: none
}
.archive .organ{
width: 90%;
padding: 2%;
margin-left: 7%;
}
.archive .organ:focus{
outline: none
}
.archive .source{
width: 80.5%;
margin-left: 2.5%;
padding: 2%;
}
.archive .source:focus{
outline: none
}
.archive .datep{
width: 50%;
margin-left: 29%;
padding: 2%;
padding-left: 10%;
}
.archive .datep:focus{
outline: none
}
.archive .datee{
width: 60%;
margin-left: 21%;
padding: 2%;
padding-left: 10%;
}
.archive .datep:focus{
outline: none
}
.foot{
margin-top: 1%;
margin-bottom: -1%;
width: 101%;
background: linear-gradient( to top right, #2b76b9 40%, #0588BC);
padding-bottom: 1%;
}
.foot th{
height: 20px;
}
.foot .logoo{
margin-top: 2%;
width: 40%;
}
.foot .logo img{
width: 40%;
}
.foot h2{
color: white;
padding-left: 2%;
font-size: 18px;
border-left:5px solid #e8770c;
}
.foot span {
font-size: 16px;
font-family: 'exo';
padding-left: 1%;
margin-right: 1%;
text-align: justify;
color: white;
}
.foot .cont{
font-size: 12px;
padding-left: 1%;
color: white;
}
.foot .locat {
margin-top: 0.75%;
width: 5%;
}
.foot .phone{
width: 5%;
}
.foot .mob{
width: 4%;
}
.foot .soc{
margin-left: -10%;
}
.foot .menf{
margin-left: -2%;
display: inline-block;
}
.foot .menf ul{
display: inline-block;
}
.foot .menf li{
margin-left: 10px;
display: inline-block;
font-weight: bold;
font-size: 14px;
color: white;
}
.foot input{
margin-left: 20%;
margin-top: 1%;
width: 60%;
padding-top: 0.5%;
padding-bottom: 0.5%;
padding-left: 3%;
border-radius: 10px;
outline: none;
}
.foot .new{
margin-left: 64%;
border-radius: 10px;
width: 20%;
color: white;
background-color: #e8770c;
border-color: #e8770c;
outline: none;
font-weight: bold;
padding: 1%;
}
.foot h3{
font-size: 16px;
color: white;
}
.foot a{
color: white;
}
.copy{
width: 101%;
}
.copy th{
padding-top: 1%;
color: white;
background: linear-gradient( to top right, #2b76b9 40%, #0588BC);
}
}
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/************CSS MOBILE Orientation Portrait : 320 min width ****************************************/
/* WIDTH: 80%;
overflow: auto;
white-space: nowrap;
display: inline-block;*/
@media (min-width:640px) and (max-width:800px) {
html {
width: 100%;
background-color:red;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.aut{
width :90%;
}
.cache{
display: none;
}
.mini{
float: right
margin-right: -2em !important;
font-size: 10px;
}
body {
width: 100%;
color:#6f6f6f;
position:absolute;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#nanouch{
margin-top: 2%;
overflow: auto;
}
.hidi{
display: initial;
color: white;
}
.modal {
display: none;}
.inscription{
margin-top: 4%;
margin-left: 13%;
padding: 1%;
width: 75%;
color: black;
font-weight: bold;
background-color: white;
border:1px solid #00a0e3;
border-radius: 10px;
}
.inscription td{
padding: 0.25%;
padding-right: 0.25%;
}
.inscription th{
margin-left: -15%;
background-color: #125688;
border-radius: 10px;
padding: 1%;
margin-left: -1%;
width: 100%;
font-size: 18px;
color:white;
}
.inscription .infop th{
margin-left: -15%;
border-radius: 10px;
padding: 1%;
margin-left: -1%;
width: 100%;
font-size: 16px;
color:white;
}
.inscription input{
border:1px solid #00a0e3;
border-radius: 10px;
width: 50%;
height: 35px;
padding-left: 1%;
outline: none;
}
.inscription select{
border:1px solid #00a0e3;
width: 100%;
height: 35px;
padding: 0.25%;
border-radius: 10px;
margin-bottom :2em;
}
.inscription .tit{
border:1px solid #00a0e3;
width: 5%;
color: black;
height: 12px;
outline: none;
}
.inscription .tit label{
font-weight: bold;
font-size: 18px;
color: black;
}
.confirmation .butt {
margin-top: 1%;
padding:3%;
font-weight: bold;
background-color: #00a0e3;
border-color:#00a0e3;
border-radius: 10px;
color: white;
width: 100%;
outline: none;
}
.sercli{
width: 71%;
margin-top: 2%;
margin-left: 15%;
margin-right: 10%;
box-shadow: 5px -3px 10px grey;
border-radius: 5px;
}
div.dataTables_info {
display: none;
}
.badge1 {
position:relative;
border-radius: 10px;
background-color: #7BC342;
border-color: #7BC342;
border-style: solid;
outline: none;
}
.badge1[data-badge]:after {
content:attr(data-badge);
position:absolute;
top:-10px;
right:-10px;
font-size:1em;
background:red;
color:white;
width:18px;height:18px;
text-align:center;
line-height:18px;
border-radius:50%;
box-shadow:0 0 1px #333;
}
.favo{
display: block;
cursor: pointer;
margin: auto;
width: 56%;
height:80%;
}
.head{
position: absolute;
width: device-width;
margin-right: auto;
margin-left: auto;
position: top;
background-size:cover;
background: linear-gradient( to bottom right, #2b76b9 30%, white);
}
.icon{
margin-right:2%;
width: 25%;
float: right;
border-radius: 10px;
border-color: #2b76b9;
}
.welcome{
margin-top: -2%;
font-size: 18px;
font-family: 'Lato';
color: white;
}
.mobilemenu {
margin-top: 1em;
position: relative;
}
.dd-button {
display: inline-block;
border: 1px solid #7BC342;
border-radius: 10px;
padding: 5px 25px 5px 10px;
background-color: #7BC342;
color: white;
cursor: pointer;
white-space: nowrap;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-input {
display: none;
}
.dd-menu {
z-index: 100;
position: absolute;
top: 100%;
border: 1px solid #7BC342;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
background-color: #2b76b9;
color: white;
list-style-type: none;
}
.dd-input + .dd-menu {
display: none;
}
.dd-input:checked + .dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li.active{
color: white;
background-color: #7BC342;
}
.dd-menu li:hover {
background-color: #7BC342;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider{
padding: 0;
border-bottom: 1px solid #cccccc;
}
header{
width: device-width;
background: linear-gradient( to bottom right, #2b76b9 30%, white);
margin-top: -0.5em;
}
header .logo{
width: 80%;
margin-top: 2%;
margin-left: -10%;
margin-bottom: 1%;
}
.menu{
display: none;
position: relative;
margin-top: -7%;
margin-left: 30%;
margin-bottom: 2%;
}
.menu ul{
padding: 1%;
list-style-type: none;
margin-right: 1%;
margin-left: 15%
}
.menu ul li {
float:left; /*pour IE*/
padding: 10px;
font-weight: bold;
letter-spacing: 1.5px;
color: white;
margin-right: 0.5%;
font-size: 16px;
}
.menu ul li.active {
color: white;
font-weight: bold;
letter-spacing: 1.5px;
background-color:#125689;
border-left:2px solid #e8770c;
border-radius:10px;
}
.menu ul li:hover{
background-color: #00a0e3;
border-radius: 10px;
color:white;
}
.menu ul li a{
display: block;
padding:20px;
}
.social{
float: right;
margin-top: -8%;
margin-right: 25%;
}
.client{
width: 50%;
height: 45px;
padding-top: 0.25px;
display: inline-block;
float: right;
font-weight: bold;
color: white;
border-radius: 10px;
background-color: #125688;
border-color: #125688;
}
.client:hover{
cursor: pointer;
}
.client a{
width: 100%;
height: 100%;
}
.client:focus {outline:0;}
.esp{
margin-top: -12%;
margin-right: 26%;
}
.lang{
width: 13%;
position: relative;
height: 20px;
padding-left: 2px;
float: right;
font:bold 13px 'Palanquin';
color: white;
background-color: white;
margin-left: 2%;
border-radius: 10px;
background-color: #125688;
border-color: #125688
}
.lang:focus {outline:0;}
.lang:hover{
cursor: pointer;
}
/* Style the tab */
.tab {
display: none;
float: left;
border: 1px solid #ccc;
background-color: #4AB2D6;
width: 10%;
min-height: 920px;
margin-left: 2%;
margin-top:2%;
border-top-left-radius: 10px;
}
/* Style the buttons that are used to open the tab content */
.tab button {
display: block;
background-color: #4AB2D6;
color: white;
font-weight: bold;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
}
/* Style the buttons that are used to open the tab content */
.tab button {
display: block;
background-color: #4AB2D6;
color: white;
font-weight: bold;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
width: 100%;
margin-top: 10%;
margin-left:15%;
color: #2b76b9;
font-weight: bold;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
border-top-right-radius: -10%;
height: 120px;
background-color: white;
}
/*Recherche*/
/* Style the tab content */
.tabcontent {
margin-top: 2%;
margin-bottom: 2%;
float: left;
padding: 0px 12px;
border-radius: 10px;
border: 1px solid #ccc;
background-color: white;
width: 95%;
border-left: none;
min-height: 920px;
}
.tabcontet {
margin-top: 2%;
margin-bottom: 2%;
margin-left: auto;
margin-right: auto;
padding: 0px 12px;
border-radius: 10px;
border: 1px solid #ccc;
background-color: white;
width: 80%;
border-left: none;
}
.tab .icon{
width: 85%;
margin-left: 5%;
background-image: url(img/appel.png);
}
.tab .icon2{
margin-top: -2%;
width: 60%;
margin-left: 10%;
background-image: url(img/appel.png);
}
.logo{
margin-left: 3em;
margin-top: -2%;
width: 50%;
}
.bfavo{
padding: 2%;
margin-left: -3%;
margin-right: 1%;
outline: none;
color: white;
font-family: 'Lato';
font-size: 16px;
background-color: #7BC342;
border-color: #7BC342;
border-radius: 10px;
}
.offre{
width: 95%;
margin-top: 6em;
padding: 2%;
background-color: white;
border-radius: 10px;
margin-left: 3%;
}
.offre th{
background-color:#2b76b9 ;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
padding: 1%;
color: white;
}
.offre .tyype{
width: 30%;
padding: 2%;
margin-top: -3%;
margin-right: 2%;
border-radius: 20px;
border-top-left-radius: 0;
background-color: #F8F8FF;
}
.tyype h3{
font-size: 1em;
}
.tyype th{
color: black;
}
.tyype td{
color: black;
}
.tyype ul{
margin-top: 3%;
list-style-type: none;
}
.tyype ul li{
color: black;
padding: 2%;
}
.tyype li:hover{
background-color: #7BC342;
color: white;
border-radius: 10px;
}
.tyype span{
font-size: 1em !important;
}
.offre .resum {
width: 100%;
border-collapse: collapse;
}
.offre .resum td{
font-size: 16px !important;
}
.offre span{
font-size: 1em;
color: black;
display:initial;
}
.resum td{
color: black;
padding: 1%;
}
.resum th{
background-color:#2b76b9 ;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
padding: 1%;
color: white;
}
.resum .mont{
font-weight: bold;
font-size: 18px;
color: #7BC342;
}
.recherche{
margin-top: 1em;
width:95%;
padding: 1%;
padding-bottom: 2%;
border-spacing: 0.5px;
border-radius: 10px;
}
.recherche th{
background-color: #7BC342;
padding: 1%;
color: white;
letter-spacing: 1.5px;
font-weight: bold;
font-size: 18px;
border-collapse: collapse;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.recherche input{
width: 95%;
border-radius: 10px;
border-color: #00a0e3;
padding:1%;
}
.recherche input:focus{
outline: none;
}
.recherche td{
padding: 0.25%;
}
.recherche select{
width: 95%;
border-radius: 10px;
border-color: #00a0e3;
padding:1%;
}
.recehrche label{
padding: 1%;
}
.recherche input{
border:1px solid #2b76b9;
}
.recherche .aboudy{
display: none;
}
.recherche .submit{
width: 30%;
font-size: 12px;
height: 40px;
color: #fff;
font-weight: 500;
border-radius: 10px;
background-color: #7BC342 ;
border-color: #7BC342 ;
outline: none;
border-style: solid;
}
.sticky-container{
padding:0px;
margin:0px;
position:fixed;
right:-130px;
top:525px;
width:210px;
z-index: 1100;
}
.sticky li{
list-style-type:none;
background-color:#125688;
color:#efefef;
height:43px;
padding:0px;
margin:0px 0px 1px 0px;
-webkit-transition:all 0.25s ease-in-out;
-moz-transition:all 0.25s ease-in-out;
-o-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
cursor:pointer;
}
.sticky li:hover{
margin-left:-115px;
}
.sticky li img{
float:left;
margin:5px 4px;
margin-right:5px;
}
.sticky li p{
padding-top:5px;
margin:0px;
line-height:16px;
font-size:11px;
}
.sticky li p a{
text-decoration:none;
color:white;
font-weight: bold;
}
.sticky li p a:hover{
text-decoration:underline;
}
.sector {
width: 55%;
margin-top: 1%;
background-color: #4AB2D6 ;
border-color: #4AB2D6 ;
padding: 1%;
border-radius: 10px;
color: white;
font-size: 14px;
font-weight: bold;
outline: none
}
.sectorr{
margin-top: 1%;
margin-left: 0.5em;
width: 60%;
background-color: #7BC342 ;
border-color: #7BC342 ;
padding: 1%;
border-radius: 10px;
color: white;
font-size: 14px;
font-weight: bold;
outline: none;
border-style: solid;
}
.topp{
width: 95%;
margin-top: 9em ;
margin-left: 3%;
padding: 1%;
background-color: #EFF0F0;
}
.sider{
width: 90%;
background-color: white;
color: black;
padding: 2%;
font-size: 16px;
border:2px solid #125688;
border-radius: 10px;
}
.sider th{
background-color: #2b76b9;
}
.appel{
width: 100%;
border: 2px solid rgba(225, 229, 234, 0.52);
padding: 0.2em;
color:black;
font-size: 18px;
}
.appel .det {
width:100% ;
display:block;
margin:auto;
}
/*.appel tr:nth-child(odd) { background-color:red; }
.appel tr:nth-child(even) { background-color:green; }*/
.appel tr{
width:100%;
padding: 1%;
}
.appel th{
border-bottom: 5px solid #e8770c;
color: #125688;
padding: 1%;
font-size: 12px;
font-weight: bold;
}
.appel td{
padding: 4px;
border: 0.1px solid #e8e8e8;
color: black;
font-size: 14px;
/*border-bottom: 1px solid black;
border: 1px dotted black;*/
}
.map{
margin-left: 2.5%;
margin-top: 10%;
}
.map td{
padding: 5%;
}
.map iframe{
padding: 1%;
box-shadow: 0px -10px 0px 0px 30px grey;
}
.contact{
float: right;
width: 40%;
padding-top: 2%;
padding-left: 2%;
padding-bottom: 2%;
box-shadow: 3px 2px 30px grey;
margin-right: 10%;
margin-top: 11%;
background-color: white;
border:1px solid black;
border-radius: 5px;
}
.contact th{
padding-bottom: 2%;
font-weight: bold;
text-decoration: underline;
font-size: 18px;
color: black;
}
.contact tr{
}
.contact td{
font-weight: bold;
font-size: 16px;
color: black;
align-content: left;
border-spacing: 10px;
}
.contact input{
width: 85%;
padding: 1%;
border-radius: 5px;
border:1px solid #00a0e3;
}
.contact button{
background-color: #125688;
border-color: #125688;
border-radius: 10px;
width: 50%;
color: white;
padding: 1%;
font-weight: bold;
margin-top: 10%;
margin-left: 80%;
}
.contact textarea{
width: 85%;
height: 150px;
}
.info{
width: 30%;
margin-top: 12%;
margin-left: 10%;
float: left;
background-color: white;
border:1px solid black;
border-radius: 5px;
box-shadow: 2px -3px 20px grey;
}
.info th{
color:black;
font-weight: bold;
text-decoration: underline;
padding:2%;
}
.info td{
color:black;
padding: 2%;
padding-left: 5%;
}
.info td span{
color: black;
font-size: 18px;
}
.info a{
font-weight: bold;
font-size: 18px;
}
.info h3{
font-size: 18px;
}
.map{
margin-top: 10%;
}
.map td{
padding: 5%;
}
.map iframe{
padding: 1%;
box-shadow: 0px -10px 0px 0px 30px grey;
}
.presenta{
width: 90%;
margin-left: 5%;
margin-top: 15%;
border-collapse: collapse;
}
.presenta tr:nth-child(odd){
background-color: #E6E6FA;
}
.presenta .cone{
width: 90%;
height: 300px;
}
.presenta .para{
width: 70%;
margin-top: -5%;
margin-left: 15%;
text-align: justify;
color: #125688;
font-weight: bold;
font-size: 16px;
}
.presenta .parag{
width: 70%;
margin-top: -5%;
margin-left: 15%;
text-align: justify;
color: #125688;
line-height: 1.5em;
font-weight: bold;
font-size: 16px;
}
.presenta .parag a{
color: #125688;
font-size: 18px;
font-weight: bold;
}
.presenta li{
padding: 1%;
}
.detail{
width: 60%;
margin-top: 14%;
margin-left: 20%;
border-radius: 10px;
border-collapse: collapse;
background-color:white;
}
.entreprise{
width: 85%;
margin-top: 12%;
margin-left: 7.5%;
padding:2%;
border-radius: 10px;
box-shadow: 2px 3px 20px grey;
text-align: justify;
background-color: white;
color: #2b76b9;
font-size: 16px;
font-weight: bold;
}
.deska{
width: 80%;
height: 250px;
margin-left: 15%;
}
.entreprise th{
color: black;
padding-left: -50%;
margin-left: -10%;
border-left:5px solid orange;
}
.tarif{
width: 85%;
margin-top: 1%;
border-radius: 10px;
box-shadow: 2px -3px 20px grey;
background-color: white;
margin-left: 7.5%;
}
.tarif th{
border-left: 5px solid orange;
font-size: 18px;
color: #125688;
padding: 2%;
}
.tarif .apoff{
width: 80%;
margin-left: 7%;
border-spacing: 10px;
}
.apoff th{
border-left: none;
}
.apoff .titre{
border-radius: 10px;
background: linear-gradient( to right, #DCDCDC 60%, white);
}
.apoff .yellow{
background-color: orange;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-bottom: 0.5%;
padding: 1px;
width: 30%;
}
.apoff h2{
color: black;
text-shadow: 2px 1px 5px white;
font-size: 22px;
}
.apoff .blue{
background-color: #125688;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 1px;
padding-bottom: 1%;
width: 30%;
}
.apoff .tit{
color: white;
text-shadow: none;
font-size: 22px;
}
.apoff .desc{
width: 100%;
margin-left: 4%;
border-bottom-left-radius: 10px;
color: black;
background-color: white;
}
.prix{
width: 65%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 22px;
font-weight: bold;
text-shadow: 1px 1px 10px black;
margin-left: 22%;
background-color: #96ba48;
border-bottom-left-radius:10px;
}
.comm{
width: 50%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 16px;
font-weight: bold;
border-color: orange;
outline: none;
text-shadow: 1px 1px 10px orange;
margin-left: 41.5%;
background-color: orange;
border-top-left-radius:10px;
border-bottom-right-radius: 5px;
}
.comm2{
width: 50%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 16px;
font-weight: bold;
border-color: #125688;
outline: none;
text-shadow: 1px 1px 10px #125688;
margin-left: 43%;
background-color: #125688;
border-top-left-radius:10px;
border-bottom-right-radius: 5px;
}
.comm3{
width: 60%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 12px;
font-weight: bold;
border-color: #125688;
outline: none;
text-shadow: 1px 1px 10px #125688;
margin-left: 33%;
background-color: #125688;
border-top-left-radius:10px;
border-bottom-right-radius: 5px;
}
.descr{
width: 100%;
margin-left: 4%;
border-bottom-left-radius: 10px;
color: black;
font-size: 16px;
font-weight: bold;
background-color: white;
}
.tarif .servad{
width: 80%;
margin-top: 2%;
margin-left: 7%;
border-spacing: 10px;
border-radius: 10px;
background-color: white;
}
.servad td{
border-left: none;
}
.servad th{
border-radius: 10px;
padding: 1%;
border-left: none;
background: linear-gradient( to right, #DCDCDC 60%, white);
}
.servad .titr{
color: white;
text-shadow: none;
font-size: 16px;
}
.servad .blu{
background-color: #125688;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 1px;
padding-bottom: 1%;
width: 30%;
}
.servad .suivre{
width: 90%;
padding: 3%;
border-radius: 10px;
background-color: white;
}
.suivre li{
color: black;
line-height: 2em;
font-size: 16px;
font-weight: bold;
list-style-type: none;
margin-left: -20%;
}
.servad .pri{
color: white;
margin-top: 2%;
padding: 2%;
font-size: 32px;
font-weight: bold;
}
.banpub{
width: 85%;
margin-top: 2%;
margin-left: 7.5%;
border-spacing: 10px;
padding: 2%;
border-radius: 10px;
text-align: justify;
box-shadow: 2px 3px 20px grey;
background-color: white;
}
.banpub th{
border-left: 5px solid orange;
font-size: 18px;
color: #125688;
padding: 1%;
}
.banpub .descri{
color: black;
padding: 5%;
font-size: 16px;
}
.banpub .pub{
border-collapse: collapse;
width: 80%;
margin-left: 7.5%;
padding: 1%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #125688;
}
.pub th{
color: white;
border-left: none;
}
.pub .banni{
width: 99.75%;
margin-left: 0.5%;
border-collapse: collapse;
background-color: white;
}
.pub .comma{
float: right;
color: white;
font-size: 18px;
margin-top: -3%;
margin-right: -0.25%;
height: 30px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-color: #125688;
background-color: #125688;
width: 20%;
}
.banni td{
color: black;
font-size: 18px;
font-weight: bold;
padding: 2%;
}
.banni li{
color: #125688;
margin:2%;
}
.detail th{
background-color: #2b76b9;
border-radius: 10px;
padding:1%;
color:white;
font-size: 18px;
font-weight: bold;
}
.detail td{
color: black;
font-size: 18px;
padding: 0.5%;
padding-left: 3%;
}
.detail .montant{
width: 80%;
background-color: #2b76b9;
color: white;
font-size: 16px;
margin:1%;
border:3px ridge #e8770c;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 90% 100%, 75% 0);
}
.annonceur{
width: 60%;
margin-top: 1%;
margin-left: 20%;
border-radius: 10px;
background-color:white;
}
.annonceur td{
color: black;
font-size: 16px;
font-weight: bold;
padding: 1%;
padding-left: 3%;
}
.annonceur th{
background-color: #2b76b9;
border-radius: 10px;
padding:1%;
color:white;
font-size: 18px;
font-weight: bold;
}
.annonceur button{
width: 10%;
padding: 1%;
border-radius: 10px;
background-color: #00a0e3;
color: white;
font-weight: bold;
}
.capture{
width: 95%;
margin-top: 2%;
margin-left: 3%;
border-radius: 10px;
background-color:white;
padding-bottom: 2%;
}
.capture th{
background-color: #2b76b9;
border-radius: 10px;
padding:1%;
color:white;
font-size: 14px;
font-weight: bold;
}
.capture td{
color: black;
font-size: 16px;
font-weight: bold;
padding: 1%;
padding-left: 3%;
}
.capture tr{
padding-right: 2%;
padding-left: 2%;
}
.capture .source{
width: 25%;
padding-left: 1%;
font-size: 16px;
font-weight: bold;
background-color: #2b76b9;
color: white;
font-size: 14px;
margin:1%;
font-weight: bold;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 90% 100%, 75% 0);
}
.capture .zonecap{
width: 60%;
margin-left: 10%;
padding-right: 3%;
cursor: zoom-in;
}
.favo{
margin: auto;
margin-top: 10%;
margin-bottom: 2%;
width: 75%;
background-color: white;
color:white;
border-radius: 10px;
}
.favo th{
width: 15%;
font-weight: bold;
padding: 1%;
border-radius: 10px;
font-size: 16px;
background-color: #125688;
border-bottom: 2px solid orange;
}
.favo .titre{
background-color: white;
color:black;
}
.favo td{
color: black;
padding: 0.5%;
padding-left: 1.5em;
}
.favor{
margin: auto;
margin-top: 2%;
margin-bottom: 2%;
width: 75%;
background-color: white;
color:white;
border-radius: 10px;
}
.favor th{
width: 15%;
font-weight: bold;
padding: 1%;
border-radius: 10px;
font-size: 16px;
background-color: #125688;
border-bottom: 2px solid orange;
}
.favor .titre{
background-color: white;
color:black;
}
.favor td{
color: black;
padding: 0.5%;
padding-left: 1.5em;
}
.back input{
background-color: #125688;
border-color: #125688;
border-radius: 10px;
outline: none;
color: white;
height: 30px;
margin-left: 3em;
margin-top:7em;
}
.archive{
margin-top: 3%;
width:80%;
background-color: white;
border-radius: 10px;
padding-bottom: 2%;
}
.archive th{
background-color: #2b76b9;
padding: 1%;
color: white;
letter-spacing: 0.5px;
font-weight: bold;
font-size: 16px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.archive input{
width: 90%;
border-radius: 10px;
border-color: #00a0e3;
padding:1%;
}
.archive input:focus{
outline: none;
}
.archive td{
width: 20%;
}
.archive .wilaya{
width: 95%;
border-radius: 10px;
border-color: #2b76b9;
margin-left: 12%;
padding:2%;
}
.archive .wilaya:focus{
outline: none;}
.archive .secteur{
width: 95%;
border-radius: 10px;
border-color: #2b76b9;
margin-left: 7%;
padding:2%;
}
.archive .secteur:focus{
outline: none;}
.archive .rech{
width: 85%;
margin-left: 3%;
color: white;
letter-spacing: 0.5px;
font-weight: bold;
font-size:16px;
border-radius: 10px;
padding: 2%;
background-color: #2b76b9;
border-color: #2b76b9;
}
.archive .rech:focus{
outline: none;
}
.archive .type{
width: 86%;
border-radius: 10px;
border-color: #2b76b9;
margin-left: -9%;
padding:2%;
}
.archive .type:focus{
outline: none
}
.archive .titre{
width: 90%;
padding: 2%;
margin-left: 12%;
}
.archive .titre:focus{
outline: none
}
.archive .organ{
width: 90%;
padding: 2%;
margin-left: 7%;
}
.archive .organ:focus{
outline: none
}
.archive .source{
width: 80.5%;
margin-left: 2.5%;
padding: 2%;
}
.archive .source:focus{
outline: none
}
.archive .datep{
width: 50%;
margin-left: 29%;
padding: 2%;
padding-left: 10%;
}
.archive .datep:focus{
outline: none
}
.archive .datee{
width: 60%;
margin-left: 21%;
padding: 2%;
padding-left: 10%;
}
.archive .datep:focus{
outline: none
}
.foot .cachh{
display: none;
}
.foot{
margin-top: 1%;
margin-bottom: -1%;
width: 100%;
background: linear-gradient( to bottom right, #2b76b9 40%, white);
padding-bottom: 1%;
}
.foot td{
font-size: 14px;
display: block;
}
.foot th{
height: 20px;
}
.foot .logoo{
margin-top: 2%;
width: 40%;
}
.foot h2{
color: white;
padding-left: 2%;
font-size: 10px;
border-left:5px solid #e8770c;
}
.foot span {
font-size: 1em;
padding-left: 1%;
margin-right: 1%;
text-align: justify;
color: white;
}
.foot .cont{
font-size: 12px;
padding-left: 1%;
color: white;
}
.foot .locat {
margin-top: 0.75%;
width: 5%;
}
.foot .phone{
width: 5%;
}
.foot .mob{
width: 4%;
}
.foot .soc{
margin-left: -10%;
}
.foot .menf{
margin-left: -2%;
display: inline-block;
}
.foot .menf ul{
display: inline-block;
}
.foot .menf li{
margin-left: 10px;
display: inline-block;
font-weight: bold;
font-size: 14px;
color: white;
}
.foot input{
margin-left: 20%;
margin-top: 1%;
width: 60%;
padding-top: 0.5%;
padding-bottom: 0.5%;
padding-left: 3%;
border-radius: 10px;
outline: none;
}
.foot .new{
margin-left: 64%;
border-radius: 10px;
width: 20%;
color: white;
background-color: #e8770c;
border-color: #e8770c;
outline: none;
font-weight: bold;
padding: 1%;
}
.foot h3{
font-size: 16px;
color: white;
}
.foot a{
color: white;
}
.copy{
width: 101%;
margin-top: 0.5%;
}
.copy th{
padding-top: 1%;
color: white;
background: linear-gradient( to top right, #2b76b9 65%, white);
}
}
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/*****************************CSS MOBILE*************************************************************/
/************CSS MOBILE Orientation Portrait : 320 min width ****************************************/
/* WIDTH: 80%;
overflow: auto;
white-space: nowrap;
display: inline-block;*/
@media (min-width:320px) and (max-width:640px) {
html {
width: 100%;
background-color:red;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.aut{
width :90%;
}
.cache{
display: none;
}
.mini{
float: right
margin-right: -2em !important;
font-size: 10px;
}
body {
width: 100%;
color:#6f6f6f;
position:absolute;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#nanouch{
margin-top: 2%;
overflow: auto;
}
#fbp{
margin-top: 5em;
margin-left: 0.5em;
}
.hidi{
display: block;
}
#AO{
width: 25%;
margin: auto;
display: block;
}
.tyype ul li {
color: black;
padding: 2%;
margin-left: -1em;
}
.inscription{
margin-top: 4%;
margin-left: 13%;
padding: 1%;
width: 75%;
color: black;
font-weight: bold;
background-color: white;
border:1px solid #00a0e3;
border-radius: 10px;
}
.inscription td{
padding: 0.25%;
padding-right: 0.25%;
}
.inscription th{
margin-left: -15%;
background-color: #125688;
border-radius: 10px;
padding: 1%;
margin-left: -1%;
width: 100%;
font-size: 18px;
color:white;
}
.inscription .infop th{
margin-left: -15%;
border-radius: 10px;
padding: 1%;
margin-left: -1%;
width: 100%;
font-size: 16px;
color:white;
}
.inscription input{
border:1px solid #00a0e3;
border-radius: 10px;
width: 50%;
height: 35px;
padding-left: 1%;
outline: none;
}
.inscription select{
border:1px solid #00a0e3;
width: 100%;
height: 35px;
padding: 0.25%;
border-radius: 10px;
margin-bottom :2em;
}
.inscription .tit{
border:1px solid #00a0e3;
width: 5%;
color: black;
height: 12px;
outline: none;
}
.inscription .tit label{
font-weight: bold;
font-size: 18px;
color: black;
}
.confirmation .butt {
margin-top: 1%;
padding:3%;
font-weight: bold;
background-color: #00a0e3;
border-color:#00a0e3;
border-radius: 10px;
color: white;
width: 100%;
outline: none;
}
/* Style the tab */
.tab {
display: none;
float: left;
border: 1px solid #ccc;
background-color: #4AB2D6;
width: 10%;
min-height: 920px;
margin-left: 2%;
margin-top:2%;
border-top-left-radius: 10px;
}
/* Style the buttons that are used to open the tab content */
.tab button {
display: block;
background-color: #4AB2D6;
color: white;
font-weight: bold;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
width: 100%;
margin-top: 10%;
margin-left:15%;
color: #2b76b9;
font-weight: bold;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
border-top-right-radius: -10%;
height: 120px;
background-color: white;
}
/*Recherche*/
/* Style the tab content */
.tabcontent {
margin-top: 2%;
margin-bottom: 2%;
float: left;
padding: 0px 12px;
border-radius: 10px;
border: 1px solid #ccc;
background-color: white;
width: 86%;
border-left: none;
min-height: 920px;
}
.tabcontet {
margin-top: 2%;
margin-bottom: 2%;
margin-left: auto;
margin-right: auto;
padding: 0px 12px;
border-radius: 10px;
border: 1px solid #ccc;
background-color: white;
width: 80%;
border-left: none;
}
.tab .icon{
width: 85%;
margin-left: 5%;
background-image: url(img/appel.png);
}
.tab .icon2{
margin-top: -2%;
width: 60%;
margin-left: 10%;
background-image: url(img/appel.png);
}
.bat{
margin-left: -2em;
}
.sercli{
width: 71%;
margin-top: 2%;
margin-left: 15%;
margin-right: 10%;
box-shadow: 5px -3px 10px grey;
border-radius: 5px;
}
div.dataTables_info {
display: none;
}
.badge1 {
position:relative;
border-radius: 10px;
background-color: #7BC342;
border-color: #7BC342;
border-style: solid;
outline: none;
}
.badge1[data-badge]:after {
content:attr(data-badge);
position:absolute;
top:-10px;
right:-10px;
font-size:1em;
background:red;
color:white;
width:18px;height:18px;
text-align:center;
line-height:18px;
border-radius:50%;
box-shadow:0 0 1px #333;
}
.favo{
display: block;
cursor: pointer;
margin: auto;
width: 56%;
height:80%;
}
.head{
position: absolute;
width: device-width;
margin-right: auto;
margin-left: auto;
position: top;
background-size:cover;
background: linear-gradient( to bottom right, #2b76b9 30%, white);
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
.icon{
margin-right:2%;
width: 25%;
float: right;
border-radius: 10px;
border-color: #2b76b9;
}
.welcome{
margin-top: -2%;
font-size: 18px;
font-family: 'Lato';
color: white;
}
.hidi{
display: none;
}
header{
width: device-width;
background: linear-gradient( to bottom right, #2b76b9 30%, white);
margin-top: -0.5em;
}
header .logo{
width: 80%;
margin-top: 2%;
margin-left: -10%;
margin-bottom: 1%;
}
.menu {
display: none;
margin-right: -20%;
}
.menu ul{
display: block;
}
.menu li{
padding: 2%;
letter-spacing: 1px;
font-size: 16px;
font-weight: bold;
color: white;
display: inline-block;
border-radius: 10px;
}
.menu li:hover{
background-color: #6CCB17;
}
.menu li.active{
background-color: #7BC342;
border-left: 2px solid orange;
}
.mobilemenu {
float: left;
display: inline-block;
position: relative;
z-index: 100;
}
.dd-button {
display: inline-block;
border: 1px solid #7BC342;
border-radius: 10px;
padding: 5px 25px 5px 10px;
background-color: #7BC342;
color: white;
cursor: pointer;
white-space: nowrap;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-input {
display: none;
}
.dd-menu {
z-index: 100;
position: absolute;
top: 100%;
border: 1px solid #7BC342;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
background-color: #2b76b9;
color: white;
list-style-type: none;
}
.dd-input + .dd-menu {
display: none;
}
.dd-input:checked + .dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li.active{
color: white;
background-color: #7BC342;
}
.dd-menu li:hover {
background-color: #7BC342;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider{
padding: 0;
border-bottom: 1px solid #cccccc;
}
.social{
float: right;
margin-top: -8%;
margin-right: 25%;
}
.client{
border-radius: 10px;
font-weight: bold;
font-size: 0.5em;
color: white;
background-color: #7BC342;
border-color: #7BC342;
padding: 5%;
outline: none;
margin-right: 5%;
}
.lang{
width: 13%;
position: relative;
height: 20px;
padding-left: 2px;
float: right;
font:bold 13px 'Palanquin';
color: white;
background-color: white;
margin-left: 2%;
border-radius: 10px;
background-color: #125688;
border-color: #125688
}
.lang:focus {outline:0;}
.lang:hover{
cursor: pointer;
}
.logo{
margin-left: 4em;
margin-top: -2%;
width: 40%;
}
.bfavo{
padding: 2%;
margin-left: -3%;
margin-right: 1%;
outline: none;
color: white;
font-family: 'Lato';
font-size: 16px;
background-color: #7BC342;
border-color: #7BC342;
border-radius: 10px;
}
.offre{
width: 95%;
font-size: 12px !important;
margin-top: 2em;
padding: 2%;
background-color: white;
border-radius: 10px;
}
.offre h4{
font-size: 12px;
}
.offre th{
background-color:#2b76b9 ;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
padding: 1%;
color: white;
}
.offre .tyype{
width: 30%;
padding: 2%;
margin-top: -3%;
margin-right: 2%;
border-radius: 20px;
border-top-left-radius: 0;
background-color: #F8F8FF;
}
.tyype h3{
font-size: 10px;
}
.tyype th{
color: black;
}
.tyype td{
color: black;
}
.tyype ul{
margin-top: 3%;
list-style-type: none;
}
.tyype ul li{
color: black;
padding: 2%;
margin-left: -1.8em;
}
.tyype li:hover{
background-color: #7BC342;
color: white;
border-radius: 10px;
}
.tyype span{
font-size: 1em !important;
}
.offre .resum {
width: 100%;
font-size: 1em !important;
border-collapse: collapse;
}
.offre .resum td{
font-size: 10px !important;
}
.resum a{
font-size: 10px;
}
.offre span{
font-size: 10px !important;
color: black;
display:initial;
}
.resum td{
color: black;
padding: 1%;
}
.resum th{
background-color:#2b76b9 ;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
padding: 1%;
color: white;
}
.resum .mont{
font-weight: bold;
font-size: 1em !important;
color: #7BC342;
}
.recherche{
margin-top: 1em;
width:95%;
padding: 1%;
padding-bottom: 2%;
border-spacing: 0.5px;
border-radius: 10px;
}
.recherche th{
background-color: #7BC342;
padding: 1%;
color: white;
letter-spacing: 1.5px;
font-weight: bold;
font-size: 18px;
border-collapse: collapse;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.recherche input{
width: 95%;
border-radius: 10px;
border-color: #00a0e3;
padding:1%;
}
.recherche input:focus{
outline: none;
}
.recherche td{
padding: 0.25%;
}
.recherche select{
width: 95%;
border-radius: 10px;
border-color: #00a0e3;
padding:1%;
}
.recehrche label{
padding: 1%;
}
.recherche input{
border:1px solid #2b76b9;
}
.recherche .aboudy{
display: none;
}
.recherche .submit{
width: 22%;
height: 40px;
color: #fff;
font-weight: 900;
border-radius: 10px;
background-color: #7BC342 ;
border-color: #7BC342 ;
outline: none;
border-style: solid;
}
.sticky-container{
padding:0px;
margin:0px;
position:fixed;
right:-130px;
top:525px;
width:210px;
z-index: 1100;
}
.sticky li{
list-style-type:none;
background-color:#125688;
color:#efefef;
height:43px;
padding:0px;
margin:0px 0px 1px 0px;
-webkit-transition:all 0.25s ease-in-out;
-moz-transition:all 0.25s ease-in-out;
-o-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
cursor:pointer;
}
.sticky li:hover{
margin-left:-115px;
}
.sticky li img{
float:left;
margin:5px 4px;
margin-right:5px;
}
.sticky li p{
padding-top:5px;
margin:0px;
line-height:16px;
font-size:11px;
}
.sticky li p a{
text-decoration:none;
color:white;
font-weight: bold;
}
.sticky li p a:hover{
text-decoration:underline;
}
.sector {
width: 50%;
margin-top: 1%;
background-color: #4AB2D6 ;
border-color: #4AB2D6 ;
padding: 1%;
border-radius: 10px;
color: white;
font-size: 14px;
font-weight: bold;
outline: none
}
.sectorr{
margin-top: 1%;
margin-left: 0.5em;
width: 60%;
background-color: #7BC342 ;
border-color: #7BC342 ;
padding: 3%;
border-radius: 10px;
color: white;
font-size: 14px;
font-weight: bold;
outline: none;
border-style: solid;
}
.topp{
width: 95%;
margin-top: 6.5em;
margin-left: 3%;
padding: 1%;
background-color: #EFF0F0;
}
.sider{
width: 90%;
background-color: white;
color: black;
padding: 2%;
font-size: 16px;
border:2px solid #125688;
border-radius: 10px;
}
.sider th{
background-color: #2b76b9;
}
.appel{
width: 100%;
border: 2px solid rgba(225, 229, 234, 0.52);
padding: 0.2em;
color:black;
font-size: 18px;
}
.appel .det {
width:100% ;
display:block;
margin:auto;
}
/*.appel tr:nth-child(odd) { background-color:red; }
.appel tr:nth-child(even) { background-color:green; }*/
.appel tr{
width:100%;
padding: 1%;
}
.appel th{
border-bottom: 5px solid #e8770c;
color: #125688;
padding: 1%;
font-size: 12px;
font-weight: bold;
}
.appel td{
padding: 4px;
border: 0.1px solid #e8e8e8;
color: black;
font-size: 14px;
/*border-bottom: 1px solid black;
border: 1px dotted black;*/
}
.map{
margin-left: 2.5%;
margin-top: 10%;
}
.map td{
padding: 5%;
}
.map iframe{
padding: 1%;
box-shadow: 0px -10px 0px 0px 30px grey;
}
.contact{
float: right;
width: 40%;
padding-top: 2%;
padding-left: 2%;
padding-bottom: 2%;
box-shadow: 3px 2px 30px grey;
margin-right: 10%;
margin-top: 11%;
background-color: white;
border:1px solid black;
border-radius: 5px;
}
.contact th{
padding-bottom: 2%;
font-weight: bold;
text-decoration: underline;
font-size: 18px;
color: black;
}
.contact tr{
}
.contact td{
font-weight: bold;
font-size: 16px;
color: black;
align-content: left;
border-spacing: 10px;
}
.contact input{
width: 85%;
padding: 1%;
border-radius: 5px;
border:1px solid #00a0e3;
}
.contact button{
background-color: #125688;
border-color: #125688;
border-radius: 10px;
width: 50%;
color: white;
padding: 1%;
font-weight: bold;
margin-top: 10%;
margin-left: 80%;
}
.contact textarea{
width: 85%;
height: 150px;
}
.info{
width: 30%;
margin-top: 12%;
margin-left: 10%;
float: left;
background-color: white;
border:1px solid black;
border-radius: 5px;
box-shadow: 2px -3px 20px grey;
}
.info th{
color:black;
font-weight: bold;
text-decoration: underline;
padding:2%;
}
.info td{
color:black;
padding: 2%;
padding-left: 5%;
}
.info td span{
color: black;
font-size: 18px;
}
.info a{
font-weight: bold;
font-size: 18px;
}
.info h3{
font-size: 18px;
}
.map{
margin-top: 10%;
}
.map td{
padding: 5%;
}
.map iframe{
padding: 1%;
box-shadow: 0px -10px 0px 0px 30px grey;
}
.presenta{
width: 90%;
margin-left: 5%;
margin-top: 15%;
border-collapse: collapse;
}
.presenta tr:nth-child(odd){
background-color: #E6E6FA;
}
.presenta .cone{
width: 90%;
height: 300px;
}
.presenta .para{
width: 70%;
margin-top: -5%;
margin-left: 15%;
text-align: justify;
color: #125688;
font-weight: bold;
font-size: 16px;
}
.presenta .parag{
width: 70%;
margin-top: -5%;
margin-left: 15%;
text-align: justify;
color: #125688;
line-height: 1.5em;
font-weight: bold;
font-size: 16px;
}
.presenta .parag a{
color: #125688;
font-size: 18px;
font-weight: bold;
}
.presenta li{
padding: 1%;
}
.detail{
width: 60%;
margin-top: 14%;
margin-left: 20%;
border-radius: 10px;
border-collapse: collapse;
background-color:white;
}
.entreprise{
width: 85%;
margin-top: 12%;
margin-left: 7.5%;
padding:2%;
border-radius: 10px;
box-shadow: 2px 3px 20px grey;
text-align: justify;
background-color: white;
color: #2b76b9;
font-size: 16px;
font-weight: bold;
}
.deska{
width: 80%;
height: 250px;
margin-left: 15%;
}
.entreprise th{
color: black;
padding-left: -50%;
margin-left: -10%;
border-left:5px solid orange;
}
.tarif{
width: 85%;
margin-top: 1%;
border-radius: 10px;
box-shadow: 2px -3px 20px grey;
background-color: white;
margin-left: 7.5%;
}
.tarif th{
border-left: 5px solid orange;
font-size: 18px;
color: #125688;
padding: 2%;
}
.tarif .apoff{
width: 80%;
margin-left: 7%;
border-spacing: 10px;
}
.apoff th{
border-left: none;
}
.apoff .titre{
border-radius: 10px;
background: linear-gradient( to right, #DCDCDC 60%, white);
}
.apoff .yellow{
background-color: orange;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-bottom: 0.5%;
padding: 1px;
width: 30%;
}
.apoff h2{
color: black;
text-shadow: 2px 1px 5px white;
font-size: 22px;
}
.apoff .blue{
background-color: #125688;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 1px;
padding-bottom: 1%;
width: 30%;
}
.apoff .tit{
color: white;
text-shadow: none;
font-size: 22px;
}
.apoff .desc{
width: 100%;
margin-left: 4%;
border-bottom-left-radius: 10px;
color: black;
background-color: white;
}
.prix{
width: 65%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 22px;
font-weight: bold;
text-shadow: 1px 1px 10px black;
margin-left: 22%;
background-color: #96ba48;
border-bottom-left-radius:10px;
}
.comm{
width: 50%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 16px;
font-weight: bold;
border-color: orange;
outline: none;
text-shadow: 1px 1px 10px orange;
margin-left: 41.5%;
background-color: orange;
border-top-left-radius:10px;
border-bottom-right-radius: 5px;
}
.comm2{
width: 50%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 16px;
font-weight: bold;
border-color: #125688;
outline: none;
text-shadow: 1px 1px 10px #125688;
margin-left: 43%;
background-color: #125688;
border-top-left-radius:10px;
border-bottom-right-radius: 5px;
}
.comm3{
width: 60%;
padding: 2%;
padding-left: 4%;
color: white;
font-size: 12px;
font-weight: bold;
border-color: #125688;
outline: none;
text-shadow: 1px 1px 10px #125688;
margin-left: 33%;
background-color: #125688;
border-top-left-radius:10px;
border-bottom-right-radius: 5px;
}
.descr{
width: 100%;
margin-left: 4%;
border-bottom-left-radius: 10px;
color: black;
font-size: 16px;
font-weight: bold;
background-color: white;
}
.tarif .servad{
width: 80%;
margin-top: 2%;
margin-left: 7%;
border-spacing: 10px;
border-radius: 10px;
background-color: white;
}
.servad td{
border-left: none;
}
.servad th{
border-radius: 10px;
padding: 1%;
border-left: none;
background: linear-gradient( to right, #DCDCDC 60%, white);
}
.servad .titr{
color: white;
text-shadow: none;
font-size: 16px;
}
.servad .blu{
background-color: #125688;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 1px;
padding-bottom: 1%;
width: 30%;
}
.servad .suivre{
width: 90%;
padding: 3%;
border-radius: 10px;
background-color: white;
}
.suivre li{
color: black;
line-height: 2em;
font-size: 16px;
font-weight: bold;
list-style-type: none;
margin-left: -20%;
}
.servad .pri{
color: white;
margin-top: 2%;
padding: 2%;
font-size: 32px;
font-weight: bold;
}
.banpub{
width: 85%;
margin-top: 2%;
margin-left: 7.5%;
border-spacing: 10px;
padding: 2%;
border-radius: 10px;
text-align: justify;
box-shadow: 2px 3px 20px grey;
background-color: white;
}
.banpub th{
border-left: 5px solid orange;
font-size: 18px;
color: #125688;
padding: 1%;
}
.banpub .descri{
color: black;
padding: 5%;
font-size: 16px;
}
.banpub .pub{
border-collapse: collapse;
width: 80%;
margin-left: 7.5%;
padding: 1%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #125688;
}
.pub th{
color: white;
border-left: none;
}
.pub .banni{
width: 99.75%;
margin-left: 0.5%;
border-collapse: collapse;
background-color: white;
}
.pub .comma{
float: right;
color: white;
font-size: 18px;
margin-top: -3%;
margin-right: -0.25%;
height: 30px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-color: #125688;
background-color: #125688;
width: 20%;
}
.banni td{
color: black;
font-size: 18px;
font-weight: bold;
padding: 2%;
}
.banni li{
color: #125688;
margin:2%;
}
.detail th{
background-color: #2b76b9;
border-radius: 10px;
padding:1%;
color:white;
font-size: 18px;
font-weight: bold;
}
.detail td{
color: black;
font-size: 18px;
padding: 0.5%;
padding-left: 3%;
}
.detail .montant{
width: 80%;
background-color: #2b76b9;
color: white;
font-size: 16px;
margin:1%;
border:3px ridge #e8770c;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 90% 100%, 75% 0);
}
.annonceur{
width: 60%;
margin-top: 1%;
margin-left: 20%;
border-radius: 10px;
background-color:white;
}
.annonceur td{
color: black;
font-size: 16px;
font-weight: bold;
padding: 1%;
padding-left: 3%;
}
.annonceur th{
background-color: #2b76b9;
border-radius: 10px;
padding:1%;
color:white;
font-size: 18px;
font-weight: bold;
}
.annonceur button{
width: 10%;
padding: 1%;
border-radius: 10px;
background-color: #00a0e3;
color: white;
font-weight: bold;
}
.capture{
width: 95%;
margin-top: 2%;
margin-bottom: 2%;
border-radius: 10px;
background-color:white;
padding-bottom: 2%;
}
.capture th{
background-color: #2b76b9;
border-radius: 10px;
padding:1%;
color:white;
font-size: 14px;
font-weight: bold;
}
.capture td{
color: black;
font-size: 16px;
font-weight: bold;
padding: 1%;
padding-left: 3%;
}
.capture tr{
padding-right: 2%;
padding-left: 2%;
}
.capture .source{
width: 25%;
padding-left: 1%;
font-size: 16px;
font-weight: bold;
background-color: #2b76b9;
color: white;
font-size: 14px;
margin:1%;
font-weight: bold;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 90% 100%, 75% 0);
}
.capture .zonecap{
width: 60%;
margin-left: 10%;
padding-right: 3%;
cursor: zoom-in;
}
.favo{
margin: auto;
margin-top: 10%;
margin-bottom: 2%;
width: 75%;
background-color: white;
color:white;
border-radius: 10px;
}
.favo th{
width: 15%;
font-weight: bold;
padding: 1%;
border-radius: 10px;
font-size: 16px;
background-color: #125688;
border-bottom: 2px solid orange;
}
.favo .titre{
background-color: white;
color:black;
}
.favo td{
color: black;
padding: 0.5%;
padding-left: 1.5em;
}
.favor{
margin: auto;
margin-top: 2%;
margin-bottom: 2%;
width: 75%;
background-color: white;
color:white;
border-radius: 10px;
}
.favor th{
width: 15%;
font-weight: bold;
padding: 1%;
border-radius: 10px;
font-size: 16px;
background-color: #125688;
border-bottom: 2px solid orange;
}
.favor .titre{
background-color: white;
color:black;
}
.favor td{
color: black;
padding: 0.5%;
padding-left: 1.5em;
}
.back input{
background-color: #125688;
border-color: #125688;
border-radius: 10px;
outline: none;
color: white;
height: 30px;
margin-left: 3em;
margin-top:7em;
}
.archive{
margin-top: 3%;
width:80%;
background-color: white;
border-radius: 10px;
padding-bottom: 2%;
}
.archive th{
background-color: #2b76b9;
padding: 1%;
color: white;
letter-spacing: 0.5px;
font-weight: bold;
font-size: 16px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.archive input{
width: 90%;
border-radius: 10px;
border-color: #00a0e3;
padding:1%;
}
.archive input:focus{
outline: none;
}
.archive td{
width: 20%;
}
.archive .wilaya{
width: 95%;
border-radius: 10px;
border-color: #2b76b9;
margin-left: 12%;
padding:2%;
}
.archive .wilaya:focus{
outline: none;}
.archive .secteur{
width: 95%;
border-radius: 10px;
border-color: #2b76b9;
margin-left: 7%;
padding:2%;
}
.archive .secteur:focus{
outline: none;}
.archive .rech{
width: 85%;
margin-left: 3%;
color: white;
letter-spacing: 0.5px;
font-weight: bold;
font-size:16px;
border-radius: 10px;
padding: 2%;
background-color: #2b76b9;
border-color: #2b76b9;
}
.archive .rech:focus{
outline: none;
}
.archive .type{
width: 86%;
border-radius: 10px;
border-color: #2b76b9;
margin-left: -9%;
padding:2%;
}
.archive .type:focus{
outline: none
}
.archive .titre{
width: 90%;
padding: 2%;
margin-left: 12%;
}
.archive .titre:focus{
outline: none
}
.archive .organ{
width: 90%;
padding: 2%;
margin-left: 7%;
}
.archive .organ:focus{
outline: none
}
.archive .source{
width: 80.5%;
margin-left: 2.5%;
padding: 2%;
}
.archive .source:focus{
outline: none
}
.archive .datep{
width: 50%;
margin-left: 29%;
padding: 2%;
padding-left: 10%;
}
.archive .datep:focus{
outline: none
}
.archive .datee{
width: 60%;
margin-left: 21%;
padding: 2%;
padding-left: 10%;
}
.archive .datep:focus{
outline: none
}
.foot .cachh{
display: none;
}
.foot{
margin-top: 1%;
margin-bottom: -1%;
width: 100%;
background: linear-gradient( to bottom right, #2b76b9 40%, white);
padding-bottom: 1%;
}
.foot td{
font-size: 14px;
display: block;
}
.foot th{
height: 20px;
}
.foot .logoo{
margin-top: 2%;
width: 40%;
}
.foot h2{
color: white;
padding-left: 2%;
font-size: 10px;
border-left:5px solid #e8770c;
}
.foot span {
font-size: 1em;
padding-left: 1%;
margin-right: 1%;
text-align: justify;
color: white;
}
.foot .cont{
font-size: 12px;
padding-left: 1%;
color: white;
}
.foot .locat {
margin-top: 0.75%;
width: 5%;
}
.foot .phone{
width: 5%;
}
.foot .mob{
width: 4%;
}
.foot .soc{
margin-left: -10%;
}
.foot .menf{
margin-left: -2%;
display: inline-block;
}
.foot .menf ul{
display: inline-block;
}
.foot .menf li{
margin-left: 10px;
display: inline-block;
font-weight: bold;
font-size: 14px;
color: white;
}
.foot input{
margin-left: 20%;
margin-top: 1%;
width: 60%;
padding-top: 0.5%;
padding-bottom: 0.5%;
padding-left: 3%;
border-radius: 10px;
outline: none;
}
.foot .new{
margin-left: 64%;
border-radius: 10px;
width: 20%;
color: white;
background-color: #e8770c;
border-color: #e8770c;
outline: none;
font-weight: bold;
padding: 1%;
}
.foot h3{
font-size: 16px;
color: white;
}
.foot a{
color: white;
}
.copy{
width: 101%;
margin-top: 0.5%;
}
.copy th{
padding-top: 1%;
color: white;
background: linear-gradient( to top right, #2b76b9 65%, white);
}
}
#preloader{
display: none;
}
.bubbles-wrapper {
MARGIN-TOP: 22%;
position: relative;
top: 50%;
width: 100%;
text-align: center;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
}
.bubbles {
position: relative;
display: inline-block;
width: 15px;
height: 15px;
margin: auto;
border-radius: 100%;
-webkit-animation-name: up-down;
animation-name: up-down;
-webkit-animation-duration: 1.7s;
animation-duration: 1.7s;
-webkit-animation-timing-function: cubic-bezier(.42, 0, .58, 1);
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#b1 {
background-color: #8861A4;
}
#b2 {
background-color: #2495C1;
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
#b3 {
background-color: #48BB6D;
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
#b4 {
background-color: #F1C500;
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
#b5 {
background-color: #F35957;
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
@-webkit-keyframes up-down {
0% {-webkit-transform: translateY(-50%) scale(0.2);transform: translateY(-50%) scale(0.2);}
50% {-webkit-transform: translateY(50%) scale(1.2);transform: translateY(50%) scale(1.2);}
100% {-webkit-transform: translateY(-50%) scale(0.2);transform: translateY(-50%) scale(0.2);}
}
@keyframes up-down {
0% {-webkit-transform: translateY(-50%) scale(0.2);transform: translateY(-50%) scale(0.2);}
50% {-webkit-transform: translateY(50%) scale(1.2);transform: translateY(50%) scale(1.2);}
100% {-webkit-transform: translateY(-50%) scale(0.2);transform: translateY(-50%) scale(0.2);}
}
.display-none {
display: none;
}
.danBkg {
position: absolute;
width: 100%;
height: 100vh;
background-color: #F1C500;
background-image: url("extra/dan.jpg");
z-index: 2;
}
#suiv{
background: #e16969;
text-align: center;
color: #fff;
width: 30%;
padding-left: 2%;
padding: 0.5%;
border-radius: 10px;
}