*{box-sizing:border-box;}
 

 
  #foot {display:flex;}
  #foot section {background:linear-gradient(32deg,rgba(61,0,166,1) 0%,rgba(0,0,0,1) 100%)!important;}
    .titre{font-size:16px;text-align:center;padding:12px;
	margin:0px;}
 #foot section{background:black;width:25%;color:white;margin:0px; }

ul {list-style-type: none;}
 #foot section ul li a{color:white;padding:10px;}
  #foot section ul li {padding:10px;}
 

 #foot section .instagram .fa-instagram, #foot section .facebook .fa-facebook,
  #foot section .google-plus .fa-skype,
 #foot section .linkedin .fa-linkedin {color:white;padding:10px;}
 



/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
html {
  font-size: calc(60% + 0.8vmin);
}

* {
  font-size: 1rem;
}

a {
  color: #1977cc;
  text-decoration: none;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway", sans-serif;
}


.cache1{display:none;}  
  
  
 #phone1{font-size:2.5rem;} 
  

.topnav {
  overflow: hidden;
  width:65%;
  background:hsla(180deg, 100%, 29%,0.9);
  display:block-inline;
  float:right;
  border-bottom:solid 20px hsla(180deg, 100%, 29%,0.9); 
line-height: 2.2em;
}

.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  padding-left: 10px;
  margin-left: 10px;
  
}

.active {
  
  color: white;
  border-bottom:solid 2px darkblue;
  background-color: #555;
}

.topnav .icon {
  display: none;
}

.drop {
  float: left;
  overflow: hidden;
}

.drop .dropbt {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.drop-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  
}

.drop-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .drop:hover .dropbt {
  background-color: #555;
  color: white;
}

.drop-content a:hover {
  background-color: #ddd;
  color: black;
}

.drop:hover .drop-content {
  display: block;
}





@media screen and (max-width: 768px) {
  .topnav a:not(:first-child), .drop .dropbt {
    display: none;
  }
  .topnav button.icon {
    float: right;
    display: block;
  }
  
 .header #leftNav{display:none;}

 
 .header .topnav {
 display:block;width:100%;}

.topnav a {font-size:13px;}
.drop .dropbt {font-size: 13px;} 
   
.recherche i{display:none;} 


}





@media screen and (max-width: 992px) {
 
  
  
.header #leftNav  {display:none;}


  td span.tl1{font-size:11px;}
td span.tl2{font-weight:bold;font-size:11px;}
.header #rightTop .fa-user-friends ,.header #rightTop .fa-clock-o ,.header #rightTop .fa-envelope{font-size:14px;margin-left:5px;margin-top:2px;}

.header .topnav {
 display:block;width:100%;border-bottom:0px;}
 

 #bottom-head{display:none;}
 
 .topnav a #dv{font-size:13px;}
 
 .topnav a {font-size:14px;padding-left: 20px;padding-top: 3px;}


.twitter i,.linkedin i,.instagram i,.google-plus i,.facebook i{font-size:15px;margin-left:1px;}

#tel .fa-user-friends ,#serv .fa-clock-o ,
#em .fa-envelope{font-size:20px;margin-left:5px;}

.drop .dropbt {
  font-size: 14px;}
  
 #logo1 img{width:90px;margin-top:0px;} 
  
  
#preface{display:none;}
	 #foot {flex-wrap:wrap;}
#foot section{min-width:50%;}
}






@media screen and (max-width: 768px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .drop {float: none;}
  .topnav.responsive .drop-content {position: relative;}
  .topnav.responsive .drop-content a{font-size:11px;padding-left:1px;}
  .topnav.responsive .drop .dropbt {
    display: block;
    width: 100%;
    text-align: left;
  }
  
  
   .header #leftNav{display:none;}
  .header #rightTop{display:none;}
  .header #rightTop #tab1{display:none;}
  
  
  .header #leftTop{display:block;width:100%;}
  
 .header .topnav {
 display:block;width:100%;}
 
 .topnav a #dv{font-size:13px;}
 
  a img  {width:80px;margin-top:0px;
}
#dva #dv {font-size:11px;padding-left:1px;padding-right:1px;}
#dva #dv span{font-size:9px;}



.indented .pblue{font-size:14px;text-indent: 2%;}

.cache{display:none;}


table tr td .custom-btn {
  background:hsla(180deg, 100%, 20%,0.9);
  border: 2px solid transparent;
  border-radius:5px;
  color: var(--white-color);

  font-weight: var(--font-weight-semibold);
  line-height: normal;
  transition: all 0.3s;
  padding: 5px 10px;
}

table tr td .custom-btn:hover {
  background: var(--custom-btn-bg-hover-color);
  color: var(--white-color);
}



}




#main #about p{font-size:1rem;color:black;font-weight:700;}


.header {  margin-top:0px; width: auto;
   background:white;}
  

	

#leftNav{width:35%;display:block-inline;float:left;padding-bottom: 5px ;
padding-top: 10px ;
 border-bottom:solid 20px hsla(180deg, 100%, 27%,0.9);line-height: 2.1em;}


 
#leftTop{width:35%;display:block-inline;float:left;
 height:60px;}

#rightTop{width:65%;display:block-inline;float:right;
 height:60px;}


.tl1{color:black;}
.tl2{color:black;font-weight:bold;}
.fa-user-friends ,.fa-clock ,.fa-envelope{color:hsla(180deg, 100%, 25%,0.9);font-size:28px;margin-left:60px;}

a{text-decoration: none;}

#tab2{display:none;}




#bottom-head{width:66%;float:right;display:block-inline;
height:60px;
position:relative;z-index:-1;top:-77px;transform:skewX(-20deg);border-left:solid 25px hsla(180deg, 100%, 29%,0.9);}

#dva #dv span{font-size:20px;}


 

#myTopnav{padding-left:5%;}


#dv{background:#13547a;
font-size:16px;color:white;
		 padding:5px;border-radius:5px;}
		 
.topnav a #dv:hover {
 border:solid 2px red;
  } 

.topnav #dva:hover {
  background-color: hsla(180deg, 100%, 25%,0.9);
  border-bottom: solid 2px white;
  }

  a img  {width:140px;margin-top:1px;
 
}


  

 #serv:hover i,#em:hover i,#tel:hover i {
animation-name: serv-anim;
  animation-duration: 0.3s;position:relative;} 
  
  
  @keyframes serv-anim {
  0%   { left:0px; top:0px;color:blue;}
  100% { left:-10px; top:0px;color:#A9423F;}
  
  } 


.header {
  border-top: solid 2px hsla(180deg, 100%, 19%,0.9);
 
}

.content {
  padding-top: 0px;
}








.twitter i,.linkedin i,.instagram i,.google-plus i,.facebook i{color:black;
font-size:18px;
margin-left:20px;} 

.share i{color:hsla(180deg, 100%, 25%,0.9);font-size:25px;} 



 #serv i,#em i,#tel i{color:hsla(180deg, 100%, 25%,0.9);font-size:32px;}

 
#dbr {background:hsla(180deg, 100%, 25%,0.9);font-size:15px;color:white;
		 padding:10px;border-radius:5px;background:orange;width:10%;}

.fa-phone
{color:hsla(180deg, 100%, 25%,0.9);
font-size:48px;
    animation-name: trin;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}



@keyframes trin {

    from {
        transform:rotate3d(0, 0, 1, 0deg);
    }
    20%, 32%, 44%, 56%, 68% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
    23%, 35%, 47%, 59%, 71% {
        transform: rotate3d(0,0,1,15deg);
    }
    26%, 38%, 50%, 62%, 74% {
        transform: rotate3d(0,0,1,0deg);
    }
    29%, 41%, 53%, 65%, 77% {
        transform: rotate3d(0,0,1,-15deg);
    }
    80% {
        transform:rotate3d(0, 0, 1, 0deg);
    }

}





/*---------------------------------------
  CUSTOM ICON COLOR               
-----------------------------------------*/
.custom-icon {
  color: var(--secondary-color);
}


/*---------------------------------------
  CUSTOM BUTTON               
-----------------------------------------*/
.custom-btn {
  background:hsla(180deg, 100%, 20%,0.9);
  border: 2px solid transparent;
  border-radius:5px;
  color: var(--white-color);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-semibold);
  line-height: normal;
  transition: all 0.3s;
  padding: 10px 20px;
}

.custom-btn:hover {
  background: var(--custom-btn-bg-hover-color);
  color: var(--white-color);
}

.custom-border-btn {
  background: transparent;
  border: 2px solid var(--custom-btn-bg-color);
  color: var(--custom-btn-bg-color);
}

.custom-border-btn:hover {
  background: var(--custom-btn-bg-color);
  border-color: transparent;
  color: var(--white-color);
}

.custom-btn-bg-white {
  border-color: var(--white-color);
  color: var(--white-color);
}



/* Animate phone */


.fa-phone
{color:hsla(180deg, 100%, 25%,0.9);
font-size:32px;
    animation-name: trin;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}



@keyframes trin {

    from {
        transform:rotate3d(0, 0, 1, 0deg);
    }
    20%, 32%, 44%, 56%, 68% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
    23%, 35%, 47%, 59%, 71% {
        transform: rotate3d(0,0,1,15deg);
    }
    26%, 38%, 50%, 62%, 74% {
        transform: rotate3d(0,0,1,0deg);
    }
    29%, 41%, 53%, 65%, 77% {
        transform: rotate3d(0,0,1,-15deg);
    }
    80% {
        transform:rotate3d(0, 0, 1, 0deg);
    }

}